Kontrolliertes Input-Feld mit Vorschlagsliste

Eine Autocomplete-Komponente besteht aus zwei Hauptteilen: einem kontrollierten Texteingabefeld und einer Dropdown-Liste mit Vorschlägen. Das Eingabefeld befindet sich im normalen Dokumentfluss, während das Dropdown direkt darunter absolut positioniert wird. Zusammen funktionieren sie als ein einziges interaktives Widget, obwohl sie separate DOM-Elemente sind.

Sie benötigen vier State-Variablen: inputValue (String — der eingegebene Text), suggestions (Array — die aktuell passenden Elemente), isOpen (Boolean — ob das Dropdown sichtbar ist) und selectedIndex (Number — welcher Vorschlag für die Tastaturnavigation hervorgehoben ist; beginnt bei -1, wenn keiner ausgewählt ist).

Machen Sie das Eingabefeld vollständig kontrolliert: value={inputValue} und onChange={e => setInputValue(e.target.value)}. Dadurch hat React die vollständige Kontrolle über den angezeigten Text. Jeder Tastendruck aktualisiert den State und löst ein erneutes Rendern mit dem neuen Wert aus. Verwenden Sie für Autocomplete niemals ein unkontrolliertes Eingabefeld — Sie müssen den Wert programmgesteuert lesen und setzen können.

Wenn die Vorschläge aus einem lokalen Array stammen, filtern Sie bei jedem Rendern anhand von inputValue: Vergleichen Sie jedes Element mit item.toLowerCase().includes(inputValue.toLowerCase()). Bei einer großen Liste können Sie das mit useMemo berechnen, um eine erneute Berechnung bei jedem Rendern zu vermeiden. Für kleine Listen ist Inline-Filtern problemlos geeignet.

Öffnen Sie das Dropdown, wenn inputValue.length > 0 und suggestions.length > 0 gilt. Schließen Sie es, wenn das Eingabefeld den Fokus verliert (mit einer kurzen Verzögerung, damit Klicks auf Vorschläge zuerst registriert werden), wenn ein Vorschlag ausgewählt wird oder wenn die Escape-Taste gedrückt wird. Setzen Sie isOpen entsprechend, um das bedingte Rendern zu steuern.

Das onBlur-Ereignis wird ausgelöst, wenn das Eingabefeld den Fokus verliert, beispielsweise wenn der Benutzer auf einen Vorschlag klickt. Wenn Sie das Dropdown beim Blur sofort schließen, wird der Klick auf den Vorschlag nicht registriert, weil das Dropdown verschwindet, bevor der Klick ausgelöst wird. Verwenden Sie setTimeout(() => setIsOpen(false), 150), damit der Klick Zeit zur Verarbeitung hat.

Positionieren Sie das Dropdown mit position: absolute, sodass es den Inhalt unterhalb des Eingabefelds überlagert, statt ihn nach unten zu verschieben. Setzen Sie einen hohen z-index (100+), damit es über anderen Inhalten angezeigt wird. Legen Sie mit max-height eine maximale Höhe fest und verwenden Sie overflow-y: auto, damit die Liste bei vielen Ergebnissen nicht zu groß wird.

Jedes Vorschlagselement sollte einen onClick-Handler besitzen: onClick={() => { setInputValue(suggestion); setIsOpen(false); }}. Dadurch wird das Eingabefeld auf den ausgewählten Vorschlag gesetzt und das Dropdown geschlossen. Die Auswahl fühlt sich sofort und natürlich an und entspricht dem Verhalten, das Benutzer von Autocomplete-Feldern erwarten.

Eine Alternative zum Blur-Timeout ist onMouseDown={e => e.preventDefault()} für jedes Vorschlagselement. Dadurch wird verhindert, dass mousedown den Fokus vom Eingabefeld abzieht, sodass beim Klicken auf einen Vorschlag kein Blur-Ereignis ausgelöst wird. Das Eingabefeld behält den Fokus, und der Klick-Handler wird sauber ausgeführt.

Ein gutes Autocomplete muss per Tastatur bedienbar sein. Der Benutzer sollte ArrowDown drücken können, um den ersten Vorschlag hervorzuheben, die Taste weiter drücken können, um sich in der Liste nach unten zu bewegen, mit Enter auswählen und mit Escape schließen können, ohne eine Auswahl zu treffen. Dies wird durch die Verarbeitung von onKeyDown am Eingabeelement umgesetzt.

Setzen Sie selectedIndex immer auf -1 zurück, wenn der Benutzer tippt und sich inputValue ändert. Dadurch wird eine vorherige Tastaturauswahl gelöscht, sodass bei der neuen Liste gefilterter Vorschläge zunächst kein Element hervorgehoben ist. Ein veralteter Auswahlindex, der nach einer Listenänderung auf ein anderes Element zeigt, ist verwirrend und falsch.

Warum sollte bei Vorschlagselementen onMouseDown mit e.preventDefault() verwendet werden, statt sich auf ein Blur-Timeout zu verlassen?

Ein Autocomplete-Widget benötigt vier State-Variablen: inputValue, suggestions, isOpen und selectedIndex. Verwenden Sie ein kontrolliertes Eingabefeld, filtern Sie Vorschläge anhand der Eingabe und steuern Sie die Sichtbarkeit des Dropdowns über isOpen. Behandeln Sie das Wettrennen zwischen Blur und Klick entweder mit einem Timeout oder mit onMouseDown und preventDefault. Setzen Sie selectedIndex bei jeder Eingabeänderung zurück.