Entrée contrôlée avec liste de suggestions

Un composant de saisie semi-automatique comporte deux parties principales : un champ de texte contrôlé et une liste déroulante de suggestions. Le champ se trouve dans le flux normal du document, et la liste déroulante est positionnée de manière absolue juste en dessous. Ensemble, ils fonctionnent comme un seul composant interactif, bien qu’il s’agisse de deux éléments DOM distincts.

Vous avez besoin de quatre variables d’état : inputValue (chaîne — contenu saisi), suggestions (tableau — éléments correspondant actuellement), isOpen (booléen — indique si la liste déroulante est visible) et selectedIndex (nombre — indique quelle suggestion est mise en évidence pour la navigation au clavier, avec la valeur -1 lorsqu’aucune suggestion n’est sélectionnée).

Rendez le champ entièrement contrôlé : value={inputValue} et onChange={e => setInputValue(e.target.value)}. Cela donne à React le contrôle total du texte affiché. Chaque frappe met à jour l’état, ce qui déclenche un nouveau rendu avec la nouvelle valeur. N’utilisez jamais un champ non contrôlé pour une saisie semi-automatique : vous devez pouvoir lire et définir la valeur par programme.

Lorsque les suggestions proviennent d’un tableau local, filtrez-les à chaque rendu en fonction de inputValue : comparez chaque élément à l’aide de item.toLowerCase().includes(inputValue.toLowerCase()). Vous pouvez effectuer ce calcul avec useMemo si la liste est volumineuse afin d’éviter de le recalculer à chaque nouveau rendu. Pour les petites listes, un filtrage intégré convient.

Ouvrez la liste déroulante lorsque inputValue.length > 0 et suggestions.length > 0. Fermez-la lorsque le champ perd le focus, avec un léger délai pour permettre d’abord l’enregistrement des clics sur les suggestions, lorsqu’une suggestion est sélectionnée ou lorsque la touche Échap est pressée. Définissez isOpen en conséquence pour piloter le rendu conditionnel.

L’événement onBlur se produit lorsque le champ perd le focus, ce qui arrive lorsque l’utilisateur clique sur une suggestion. Si vous fermez immédiatement la liste déroulante lors de la perte de focus, le clic sur la suggestion n’est jamais enregistré, car la liste disparaît avant le déclenchement du clic. Utilisez setTimeout(() => setIsOpen(false), 150) pour laisser au clic le temps d’être enregistré.

Positionnez la liste déroulante avec position: absolute afin qu’elle se superpose au contenu situé sous le champ au lieu de le repousser vers le bas. Définissez un z-index élevé, de 100 ou plus, afin qu’elle apparaisse au-dessus des autres contenus. Définissez une max-height avec overflow-y: auto pour empêcher la liste de devenir trop haute lorsqu’elle contient de nombreux résultats.

Chaque élément de suggestion doit disposer d’un gestionnaire onClick : onClick={() => { setInputValue(suggestion); setIsOpen(false); }}. Cela définit le champ sur la suggestion sélectionnée et ferme la liste déroulante. La sélection paraît instantanée et naturelle, conformément au comportement attendu dans les champs de saisie semi-automatique.

Une alternative au délai lié à la perte de focus consiste à utiliser onMouseDown={e => e.preventDefault()} sur chaque élément de suggestion. Cela empêche l’appui de la souris de retirer le focus du champ, de sorte que l’événement de perte de focus ne se déclenche pas lors du clic sur une suggestion. Le champ conserve le focus et le gestionnaire de clic s’exécute correctement.

Une bonne saisie semi-automatique doit être utilisable au clavier. L’utilisateur doit pouvoir appuyer sur ArrowDown pour mettre en évidence la première suggestion, continuer à appuyer sur cette touche pour descendre dans la liste, appuyer sur la touche Entrée pour sélectionner une suggestion et sur la touche Échap pour fermer la liste sans sélectionner. Cette logique est implémentée en gérant onKeyDown sur l’élément de saisie.

Chaque fois que l’utilisateur saisit du texte et que inputValue change, réinitialisez selectedIndex à -1. Cela efface toute sélection clavier précédente afin que le nouvel ensemble de suggestions filtrées commence sans élément mis en évidence. Un indice de sélection obsolète pointant vers un autre élément après la modification de la liste prête à confusion et est incorrect.

Pourquoi utiliser onMouseDown avec e.preventDefault() sur les éléments de suggestion plutôt que de compter sur un délai lié à la perte de focus ?

Un composant de saisie semi-automatique a besoin de quatre variables d’état : inputValue, suggestions, isOpen et selectedIndex. Utilisez un champ contrôlé, filtrez les suggestions en fonction de la saisie et gérez la visibilité de la liste déroulante via isOpen. Gérez la condition de concurrence entre la perte de focus et le clic avec soit un délai, soit onMouseDown et preventDefault. Réinitialisez selectedIndex chaque fois que le champ change.