Tastaturnavigation in Vorschlagslisten

Verknüpfen Sie den Tastatur-Handler mit dem onKeyDown-Ereignis des Eingabeelements, nicht mit onKeyPress (veraltet) oder onKeyUp. keyDown wird ausgelöst, bevor das Zeichen im Eingabefeld erscheint. Dadurch können Sie ArrowDown, ArrowUp, Enter und Escape abfangen, bevor sie eine standardmäßige Browseraktion auslösen.

Wenn der Benutzer ArrowDown drückt, erhöhen Sie selectedIndex um 1 und begrenzen ihn auf maximal suggestions.length - 1: setSelectedIndex(prev => Math.min(prev + 1, suggestions.length - 1)). Rufen Sie außerdem e.preventDefault() auf, um zu verhindern, dass der Cursor ans Ende des Eingabetexts springt. Das wäre das standardmäßige Browserverhalten für ArrowDown in Texteingabefeldern.

Wenn der Benutzer ArrowUp drückt, verringern Sie selectedIndex um 1 und begrenzen ihn auf mindestens 0: setSelectedIndex(prev => Math.max(prev - 1, 0)). Sie können den Wert beim Überschreiten von Index 0 auch auf -1 (keine Auswahl) begrenzen. Dadurch kann der Benutzer die Auswahl aufheben und frei weiter tippen.

Wenn Enter gedrückt wird und selectedIndex >= 0 gilt, wählen Sie den hervorgehobenen Vorschlag aus: Setzen Sie inputValue auf suggestions[selectedIndex], schließen Sie das Dropdown und setzen Sie selectedIndex auf -1 zurück. Wenn kein Vorschlag hervorgehoben ist (selectedIndex ist -1), lassen Sie das normale Absenden des Formulars oder die Suchaktion zu.

Wenn Escape gedrückt wird, schließen Sie das Dropdown, indem Sie isOpen auf false setzen, und setzen Sie selectedIndex auf -1 zurück. Löschen Sie den Eingabewert nicht — der Benutzer möchte lediglich die Vorschläge schließen, ohne einen auszuwählen, und den eingegebenen Text zur weiteren Bearbeitung behalten.

Wenn Tab gedrückt wird, schließen Sie das Dropdown, da der Browser den Fokus ohnehin auf das nächste fokussierbare Element verschiebt. Wenn Sie isOpen bei Tab auf false setzen, bleibt das Dropdown nicht geöffnet, nachdem der Fokus das Eingabefeld verlassen hat. Sie müssen preventDefault() nicht aufrufen — lassen Sie den Browser die natürliche Tab-Reihenfolge steuern.

Der hervorgehobene Vorschlag muss sich visuell unterscheiden. Wenden Sie auf den Vorschlag bei selectedIndex einen aktiven Stil an: className={index === selectedIndex ? 'suggestion suggestion--active' : 'suggestion'}. Der aktive Zustand verwendet typischerweise eine andere Hintergrundfarbe, damit klar erkennbar ist, welches Element bei Enter ausgewählt wird.

Wenn die Vorschlagsliste eine maximale Höhe hat und scrollbar ist, kann das hervorgehobene Element bei der Tastaturnavigation aus dem sichtbaren Bereich scrollen. Verwenden Sie ein Ref-Array, um die DOM-Elemente der Vorschläge zu speichern, und rufen Sie bei jeder Änderung von selectedIndex listItemRefs.current[selectedIndex]?.scrollIntoView({ block: 'nearest' }) auf. Der Block-Wert nearest minimiert den erforderlichen Scrollbetrag.

Wenn sich die Eingabe ändert und eine neue gefilterte Liste angezeigt wird, setzen Sie selectedIndex im selben State-Update oder in einem useEffect, das von den Vorschlägen abhängt, auf -1 zurück. Veraltete Indizes, die auf entfernte Elemente zeigen, würden dazu führen, dass der Benutzer den falschen Vorschlag auswählt.

Der vollständige Ablauf: Der Benutzer tippt, um zu filtern, ArrowDown hebt das erste Element hervor, weitere ArrowDown-Tastendrücke bewegen sich durch die Liste, ArrowUp bewegt sich wieder nach oben, Enter wählt das hervorgehobene Element aus und Escape schließt die Liste ohne Auswahl. Damit sind alle standardmäßigen Interaktionsmuster abgedeckt, die Benutzer von einem Autocomplete-Feld erwarten.

Rufen Sie beim Behandeln von ArrowDown und ArrowUp in einem Texteingabefeld immer e.preventDefault() auf. Ohne diesen Aufruf bewegt ArrowDown den Textcursor ans Ende und ArrowUp an den Anfang. Diese Cursorbewegungen würden mit der Navigation über den Auswahlindex kollidieren und ein verwirrendes Verhalten verursachen.

Was soll geschehen, wenn der Benutzer Enter drückt und bei selectedIndex = 2 ein Vorschlag hervorgehoben ist?

Behandeln Sie onKeyDown am Eingabefeld. ArrowDown erhöht selectedIndex (begrenzt auf max), ArrowUp verringert ihn (begrenzt auf 0 oder -1), Enter wählt das hervorgehobene Element aus, Escape schließt, ohne etwas auszuwählen, und Tab schließt und lässt den Browser den Fokus verschieben. Rufen Sie bei den Pfeiltasten immer preventDefault auf und scrollen Sie das hervorgehobene Element in den sichtbaren Bereich.