Navigation au clavier dans les listes de suggestions

Associez le gestionnaire de clavier à l’événement onKeyDown de l’élément de saisie, et non à onKeyPress, qui est obsolète, ni à onKeyUp. keyDown se déclenche avant que le caractère n’apparaisse dans le champ, ce qui vous permet d’intercepter ArrowDown, ArrowUp, Entrée et Échap avant qu’ils n’aient un effet par défaut dans le navigateur.

Lorsque l’utilisateur appuie sur ArrowDown, incrémentez selectedIndex de 1, en le limitant à une valeur maximale de suggestions.length - 1 : setSelectedIndex(prev => Math.min(prev + 1, suggestions.length - 1)). Appelez également e.preventDefault() pour empêcher le curseur de se déplacer à la fin du texte saisi, ce qui est le comportement par défaut du navigateur pour ArrowDown dans les champs de texte.

Lorsque l’utilisateur appuie sur ArrowUp, décrémentez selectedIndex de 1, en le limitant à une valeur minimale de 0 : setSelectedIndex(prev => Math.max(prev - 1, 0)). Vous pouvez également choisir de le limiter à -1, pour indiquer l’absence de sélection, lorsque l’utilisateur remonte au-delà de l’indice 0. Cela permet de désélectionner une suggestion et de reprendre librement la saisie.

Lorsque la touche Entrée est pressée et que selectedIndex >= 0, sélectionnez la suggestion mise en évidence : définissez inputValue sur suggestions[selectedIndex], fermez la liste déroulante et réinitialisez selectedIndex à -1. Si aucune suggestion n’est mise en évidence, c’est-à-dire si selectedIndex vaut -1, autorisez l’envoi normal du formulaire ou l’action de recherche à se poursuivre.

Lorsque la touche Échap est pressée, fermez la liste déroulante en définissant isOpen sur false et réinitialisez selectedIndex sur -1. N’effacez pas la valeur du champ : l’utilisateur souhaite simplement masquer les suggestions sans en sélectionner une, tout en conservant le texte saisi pour le modifier.

Lorsque la touche Tabulation est pressée, fermez la liste déroulante, car le navigateur déplacera de toute façon le focus vers l’élément suivant pouvant le recevoir. Définir isOpen sur false lors de l’appui sur Tab garantit que la liste déroulante ne reste pas ouverte après que le focus a quitté le champ. Vous n’avez pas besoin d’appeler preventDefault() : laissez le navigateur gérer l’ordre naturel de tabulation.

La suggestion mise en évidence doit être visuellement distincte. Appliquez un style actif à la suggestion située à l’indice selectedIndex : className={index === selectedIndex ? 'suggestion suggestion--active' : 'suggestion'}. L’état actif utilise généralement un changement de couleur d’arrière-plan, ce qui indique clairement quel élément sera sélectionné si l’utilisateur appuie sur Entrée.

Lorsque la liste de suggestions possède une hauteur maximale et défile, l’élément mis en évidence peut sortir de l’écran pendant la navigation au clavier. Utilisez un tableau de références pour stocker les éléments DOM des suggestions et appelez listItemRefs.current[selectedIndex]?.scrollIntoView({ block: 'nearest' }) chaque fois que selectedIndex change. La valeur de bloc nearest réduit au minimum la quantité de défilement.

Lorsque le champ change et qu’une nouvelle liste filtrée apparaît, réinitialisez selectedIndex à -1 dans la même mise à jour d’état ou dans un useEffect qui dépend des suggestions. Des indices obsolètes pointant vers des éléments supprimés amèneraient l’utilisateur à sélectionner la mauvaise suggestion.

Le parcours complet est le suivant : l’utilisateur saisit du texte pour filtrer, ArrowDown met en évidence le premier élément, d’autres pressions sur ArrowDown permettent de parcourir la liste, ArrowUp permet de remonter, Entrée sélectionne l’élément mis en évidence et Échap ferme la liste sans sélectionner. Cela couvre tous les schémas d’interaction au clavier habituels attendus dans un champ de saisie semi-automatique.

Appelez toujours e.preventDefault() lorsque vous gérez ArrowDown et ArrowUp dans un champ de texte. Sinon, ArrowDown déplace le curseur de texte à la fin et ArrowUp le déplace au début. Ces déplacements du curseur entreraient en conflit avec la navigation fondée sur selectedIndex et créeraient un comportement déroutant.

Gérez onKeyDown sur le champ de saisie. ArrowDown incrémente selectedIndex, dans la limite de la valeur maximale, et ArrowUp le décrémente, dans la limite de 0 ou -1. La touche Entrée sélectionne l’élément mis en évidence, Échap ferme la liste sans effectuer de sélection, et Tab la ferme tout en laissant le navigateur déplacer le focus. Appelez toujours preventDefault pour les touches fléchées et faites défiler l’élément mis en évidence jusqu’à ce qu’il soit visible.