Input is wobbling when change event is fired

Help me!
1

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.

3

Hi @JeremyV,

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

Shohan

4

Here you are

{
    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;
        })
      }
    }
  },
5

@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

8

Hey @JeremyV :wave:, 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.

9

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

1 Like