Kontrolowany input z listą sugestii

Komponent autouzupełniania składa się z dwóch głównych części: kontrolowanego pola tekstowego oraz listy rozwijanej z sugestiami. Pole znajduje się w normalnym przepływie dokumentu, a lista rozwijana jest pozycjonowana absolutnie bezpośrednio pod nim. Razem działają jak pojedynczy interaktywny widget, mimo że są osobnymi elementami DOM.

Potrzebne są cztery zmienne stanu: inputValue (string — wpisany tekst), suggestions (array — aktualnie pasujące elementy), isOpen (boolean — określa, czy lista rozwijana jest widoczna) oraz selectedIndex (number — wskazuje sugestię wyróżnioną podczas nawigacji klawiaturą; wartość początkowa -1 oznacza brak zaznaczenia).

Pole tekstowe należy w pełni kontrolować: value={inputValue} oraz onChange={e => setInputValue(e.target.value)}. Dzięki temu React przejmuje pełną kontrolę nad wyświetlanym tekstem. Każde naciśnięcie klawisza aktualizuje stan, co wywołuje ponowne renderowanie z nową wartością. W przypadku autouzupełniania nie należy używać pola niekontrolowanego — trzeba mieć możliwość programowego odczytywania i ustawiania jego wartości.

Gdy sugestie pochodzą z lokalnej tablicy, należy filtrować ją podczas każdego renderowania na podstawie inputValue: porównać każdy element za pomocą item.toLowerCase().includes(inputValue.toLowerCase()). Jeśli lista jest duża, można obliczać ten wynik za pomocą useMemo, aby uniknąć ponownego filtrowania przy każdym renderowaniu. W przypadku małych list filtrowanie bezpośrednio w kodzie jest wystarczające.

Listę rozwijaną należy otwierać, gdy inputValue.length > 0 oraz suggestions.length > 0. Należy ją zamykać, gdy pole traci fokus (z niewielkim opóźnieniem, aby kliknięcie sugestii mogło się najpierw zarejestrować), po wybraniu sugestii albo po naciśnięciu klawisza Escape. Wartość isOpen należy ustawiać odpowiednio, aby sterowała renderowaniem warunkowym.

Zdarzenie onBlur jest wywoływane, gdy pole tekstowe traci fokus, co następuje między innymi po kliknięciu sugestii. Jeśli lista rozwijana zostanie zamknięta natychmiast po blur, kliknięcie sugestii nie zostanie zarejestrowane, ponieważ lista zniknie przed wywołaniem zdarzenia click. Należy użyć setTimeout(() => setIsOpen(false), 150), aby dać kliknięciu czas na rejestrację.

Listę rozwijaną należy pozycjonować za pomocą position: absolute, aby nakładała się na zawartość poniżej pola, zamiast przesuwać ją w dół. Należy ustawić wysoką wartość z-index (100 lub większą), aby lista wyświetlała się nad inną zawartością. Ustawienie max-height wraz z overflow-y: auto zapobiega nadmiernemu wydłużaniu się listy przy dużej liczbie wyników.

Każdy element sugestii powinien mieć handler onClick: onClick={() => { setInputValue(suggestion); setIsOpen(false); }}. Ustawia to wybraną sugestię w polu tekstowym i zamyka listę rozwijaną. Wybór jest natychmiastowy i naturalny, zgodny z oczekiwanym przez użytkowników działaniem pól autouzupełniania.

Alternatywą dla opóźnienia blur jest użycie onMouseDown={e => e.preventDefault()} na każdym elemencie sugestii. Zapobiega to przejęciu fokusu pola tekstowego przez zdarzenie mousedown, dzięki czemu podczas klikania sugestii zdarzenie blur nie jest wywoływane. Pole zachowuje fokus, a handler click jest wywoływany bez problemów.

Dobre autouzupełnianie musi umożliwiać nawigację za pomocą klawiatury. Użytkownik powinien móc nacisnąć ArrowDown, aby wyróżnić pierwszą sugestię, naciskać ten klawisz ponownie, aby poruszać się w dół listy, nacisnąć Enter, aby wybrać element, oraz Escape, aby zamknąć listę bez wyboru. Implementuje się to przez obsługę onKeyDown na elemencie pola tekstowego.

Za każdym razem, gdy użytkownik pisze i zmienia się inputValue, należy zresetować selectedIndex do wartości -1. Usuwa to poprzedni wybór klawiaturowy, dzięki czemu nowy zestaw filtrowanych sugestii rozpoczyna się bez wyróżnionego elementu. Nieaktualny indeks wskazujący po zmianie listy na inny element byłby mylący i niepoprawny.

Dlaczego na elementach sugestii należy używać onMouseDown z e.preventDefault() zamiast polegać na opóźnieniu blur?

Widget autouzupełniania potrzebuje czterech zmiennych stanu: inputValue, suggestions, isOpen oraz selectedIndex. Należy użyć kontrolowanego pola tekstowego, filtrować sugestie na podstawie wartości pola i zarządzać widocznością listy rozwijanej za pomocą isOpen. Problem wyścigu między blur a kliknięciem należy rozwiązać za pomocą timeoutu albo onMouseDown z preventDefault. Po każdej zmianie pola należy zresetować selectedIndex.