# Input is wobbling when change event is fired

**URL:** https://community.forestadmin.com/t/input-is-wobbling-when-change-event-is-fired/4745
**Category:** Help me!
**Created:** [June 1, 2022, 3:47pm UTC](https://community.forestadmin.com/t/input-is-wobbling-when-change-event-is-fired/4745 "2022-06-01T15:47:29Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![JeremyV](https://dub1.discourse-cdn.com/flex013/user_avatar/community.forestadmin.com/jeremyv/32/1033_2.png) [@JeremyV](https://community.forestadmin.com/u/JeremyV)
#### Post date: [June 1, 2022, 3:47pm UTC](https://community.forestadmin.com/t/input-is-wobbling-when-change-event-is-fired/4745/1 "2022-06-01T15:47:29Z")

</div>

You have to see it to believe it : while typing in an input, the change event is triggered. If the user keeps typing before an asynchronous query has returned a response, at the exact moment the response is returned, the input field is “reset” to the precise moment the change event was fired.

Thus it makes the field wobbling and the submit button flashing.

> **[New video by Syndic One-recette](https://photos.app.goo.gl/FJeBBN7senKQ12uK8)**

---

<div class="post-metadata">

### Author: ![shohanr](https://dub1.discourse-cdn.com/flex013/user_avatar/community.forestadmin.com/shohanr/32/4999_2.png) [@shohanr](https://community.forestadmin.com/u/shohanr)
#### Post date: [June 2, 2022, 3:05pm UTC](https://community.forestadmin.com/t/input-is-wobbling-when-change-event-is-fired/4745/3 "2022-06-02T15:05:29Z")

</div>

Hi @JeremyV,

I would like to reproduce the exact same behaviour.  
May I have your smart action containing your form please ?

Shohan

---

<div class="post-metadata">

### Author: ![JeremyV](https://dub1.discourse-cdn.com/flex013/user_avatar/community.forestadmin.com/jeremyv/32/1033_2.png) [@JeremyV](https://community.forestadmin.com/u/JeremyV)
#### Post date: [June 3, 2022, 7:13am UTC](https://community.forestadmin.com/t/input-is-wobbling-when-change-event-is-fired/4745/4 "2022-06-03T07:13:47Z")

</div>

Here you are

```javascript
{
    name: 'Créer un compte client',
    type: 'single',
    fields: [{
      field: 'civilité',
      type: 'Enum',
      enums: [
        'Madame et Monsieur',
        'Madame ou Monsieur',
        'Madame',
        'Mesdames',
        'Madame, Mademoiselle ou Monsieur',
        'Monsieur',
        'Messieurs',
        'Mademoiselle',
        'Succession',
        'Indivision',
        'Société civile immobilière',
        'Compagnie',
        'Société',
        'Groupe',
        'Administrations',
        'Société civile promotion immobilière',
        'Société civile construction vente',
        'Maître',
        'Maîtres',
        'Cabinet',
        'Docteur',
        'Notaire',
        'Etablissements',
        'Entreprise unipersonnelle à responsabilité limitée',
        'Groupement d\'intéret économique',
        'Société anonyme',
        'Société à responsabilité limitée',
        'Société anonyme simplifiée',
        'Société civile',
        'Société civile de moyens',
        'Société d\'économie mixte',
        'Société en nom collectif',
        'Société privée européenne',
        'Entreprise individuelle à responsabilité limitée',
        'Syndicat',
        'Association syndicale libre',
        'Association',
        'Banque',
        'Club'
      ],
      isRequired: true
    }, {
      field: 'nom',
      type: 'String',
      isRequired: true
    }, {
      field: 'prénom',
      type: 'String',
    }, {
      field: 'email',
      type: 'String',
      description: 'Obligatoire dans le cas de l\'ajout du premier copropriétaire de l\'immeuble, il sera le référent de cet immeuble.'
    }, {
      field: 'rôle',
      type: 'Enum',
      enums: [
        'Copropriétaire',
        'Membre du CS',
        'Président du CS'
      ],
      isRequired: true
    }, {
      field: 'Recherche adresse (5 lettres minimum)',
      type: 'String',
    }, {
      field: 'Résultats de recherche',
      type: 'Enum',
      enums: []
    }, {
      field: 'numéro de voie',
      type: 'String',
    }, {
      field: 'type et intitulé de la voie',
      type: 'String',
      isRequired: true
    }, {
      field: 'complément d\'adresse',
      type: 'String'
    }, {
      field: 'lieu-dit',
      type: 'String'
    }, {
      field: 'code postal',
      type: 'String',
      isRequired: true
    }, {
      field: 'ville',
      type: 'String',
      isRequired: true
    }, {
      field: 'pays',
      type: 'String',
      isRequired: true
    }, {
      field: 'téléphone',
      type: 'String',
      description: 'Obligatoire dans le cas de l\'ajout du premier copropriétaire de l\'immeuble.'
    }, {
      field: 'téléphone domicile',
      type: 'String',
    }],
    hooks: {
      load: ({ fields, record }) => {
        fields['pays'].value = 'France';
        return fields;
      },
      change: {
        ['Recherche adresse (5 lettres minimum)']: ({ fields, record }) => {
          if (fields['Recherche adresse (5 lettres minimum)'].value.length > 4) {
            return axios.get(`${DQE_URL}/SINGLEV2/?Adresse=${fields['Recherche adresse (5 lettres minimum)'].value}&Pays=FRA&Licence=${DQE_LICENCE_KEY}`
            ).then(res => {
              fields['Résultats de recherche'].enums = [];
              fields['Résultats de recherche'].value = null;

              if (res.data && Object.values(res.data).length > 0) {
                fields['Résultats de recherche'].enums = Object.values(res.data).map(address => address.ListeNumero.split(';').map(numero => `${numero} ${address.Voie} ${address.Complement} ${address.LieuDit} ${address.CodePostal} ${address.Localite}`)
                ).flat();
              }
              return fields;
            });
          }
          return fields;
        },

        ['Résultats de recherche']: ({ fields, record }) => axios.get(`${DQE_URL}/SINGLEV2/?Adresse=${fields['Résultats de recherche'].value}&Pays=FRA&Licence=${DQE_LICENCE_KEY}`
        ).then(res => {
          fields['numéro de voie'].value = Object.values(res.data)[0].Numero;
          fields['type et intitulé de la voie'].value = Object.values(res.data)[0].Voie;
          fields['complément d\'adresse'].value = Object.values(res.data)[0].Complement;
          fields['lieu-dit'].value = Object.values(res.data)[0].LieuDit;
          fields['code postal'].value = Object.values(res.data)[0].CodePostal;
          fields['ville'].value = Object.values(res.data)[0].Localite;
          return fields;
        })
      }
    }
  },

```

---

<div class="post-metadata">

### Author: ![JeremyV](https://dub1.discourse-cdn.com/flex013/user_avatar/community.forestadmin.com/jeremyv/32/1033_2.png) [@JeremyV](https://community.forestadmin.com/u/JeremyV)
#### Post date: [June 3, 2022, 9:30am UTC](https://community.forestadmin.com/t/input-is-wobbling-when-change-event-is-fired/4745/5 "2022-06-03T09:30:47Z")

</div>

@shohanr I think you can easily reproduce this behavior by putting a fake async function such as setTimeout for 1 or 2 seconds in the change event of any input text field

---

<div class="post-metadata">

### Author: ![anon39848301](https://avatars.discourse-cdn.com/v4/letter/a/b9e5f3/32.png) [@anon39848301](https://community.forestadmin.com/u/anon39848301)
#### Post date: [June 10, 2022, 10:20am UTC](https://community.forestadmin.com/t/input-is-wobbling-when-change-event-is-fired/4745/8 "2022-06-10T10:20:35Z")

</div>

Hey @JeremyV 👋, and sorry for the delayed response.

This issue seems related to concurrent call to the `change` hook endpoint, even though we are already debouncing the frontend input changes.

Totally able to reproduce on my end. I’ll file a bug report on our end and we will let you know once fixed.

---

<div class="post-metadata">

### Author: ![Arnaud\_Moncel](https://dub1.discourse-cdn.com/flex013/user_avatar/community.forestadmin.com/arnaud_moncel/32/24_2.png) [@Arnaud\_Moncel](https://community.forestadmin.com/u/Arnaud_Moncel)
#### Post date: [June 27, 2022, 3:38pm UTC](https://community.forestadmin.com/t/input-is-wobbling-when-change-event-is-fired/4745/9 "2022-06-27T15:38:01Z")

</div>

Hey @JeremyV 👋 a fix has been released can you confirm the issue is fixed ?
