[Form] Afficher le message d'erreur sans perdre le focus

[LotfiMEZIANI]

Description

J'utilise le TextInput dans un formulaire de recherche. Quand une erreur de saisie est détecté, l'input n'affiche pas le message d'erreur qu'une le focus perdu.

D’après ce que j'ai compris, c'est le comportement souhaité, même avec "forceDisplayMessage" à "true".

Issue and Steps to Reproduce

const MyForm = () => {
  const [value, setValue] = useState("");
  const [errorMessage, setErrorMessage] = useState("");

  const checkError = value => {
    return "ERROR MESSAGE";
  };

  const onFieldChange = ({ value: newValue }) => {
    setValue(newValue);
    setErrorMessage(checkError(newValue));
  };

  const onSubmit = () => {};

  return (
    <>
      <TextInput
        onChange={onFieldChange}
        forceDisplayMessage={true}
        name={"id"}
        label={"title"}
        value={value}
        messageType="error"
        message={errorMessage}
      />

      <button disabled={!!errorMessage} type="submit" onClick={onSubmit}>
        Submit
      </button>
    </>
  );
};

@axa-fr/react-toolkit-all version : 1.2.16

React version : 16.11.0

Proposition

Ce comportement ne répond pas au besoin de mon projet. Comme dans l'exemple ci-dessus, le bouton de soumission du formulaire se désactive à la détection d'une erreur. Mais l'input n'affiche aucun message d'erreur à l'utilisateur, ce dernier ne verra pas l'erreur pour comprendre la raison de la désactivation du bouton de soumission. l'utilisateur doit faire perdre le focus à l’input pour voir enfin son message d'erreur.

Pour couvrir ce besoin je propose de rajoute un paramètre à l'input genre "realTimeMessage", si ce dernier est à "true" l'input affiche le message d'erreur en temps réel est n'attend pas que l'input perd son focus.

[guillaumechervetaxa]

Merci pour ta PR @LotfiMEZIANI ,

Aujourd'hui ton besoin est de contourner une des règles UX qui dans ton cas n'est pas adapté.

2 idées de solutions : 1- Utiliser le Input de base et refaire le champs avec t'es règles pour ton champs Search (mais bof) 2- On peux essayer de faire évoluer la règle UX afin qu'elle convienne à tous les cas (dont le tien).

@samuel-gomez-axa , es ce que l'on peut contacter l'équipe UX ? se serait bien de faire apparaître les messages d'erreurs :

• Lorsque l'on perd le focus sur un champ (comme aujourd'hui)
• [New] Au bout de 300 ms sans avoir tapé sur une touche (un débounce 300)
• Apparition du message d'erreur un peu plus smooth qu'aujourd'hui (avec une transition)

et que cette règle soit prise en compte pour "tous" les champs de tous les formulaires.

Qu'en pensez-vous ?

[djaumes]

La solution proposée par @guillaumechervetaxa est la bonne:

Lorsque l'on perd le focus sur un champ (comme aujourd'hui) [New] Au bout de 300 ms sans avoir tapé sur une touche (un débounce 300) Apparition du message d'erreur un peu plus smooth qu'aujourd'hui (avec une transition)

L'utilisateur doit être notifié de l'erreur de saisie à la ligne et sans délai.