Nawigacja klawiaturą po listach sugestii

Handler klawiatury należy podłączyć do zdarzenia onKeyDown elementu pola tekstowego, a nie do onKeyPress (przestarzałego) ani onKeyUp. keyDown jest wywoływane przed pojawieniem się znaku w polu, co pozwala przechwycić klawisze ArrowDown, ArrowUp, Enter i Escape, zanim zadziała ich domyślne działanie w przeglądarce.

Po naciśnięciu przez użytkownika klawisza ArrowDown należy zwiększyć selectedIndex o 1, ograniczając go do maksymalnej wartości suggestions.length - 1: setSelectedIndex(prev => Math.min(prev + 1, suggestions.length - 1)). Należy również wywołać e.preventDefault(), aby zapobiec przeniesieniu kursora na koniec tekstu w polu, co jest domyślnym działaniem przeglądarki dla klawisza ArrowDown w polach tekstowych.

Po naciśnięciu przez użytkownika klawisza ArrowUp należy zmniejszyć selectedIndex o 1, ograniczając go do minimalnej wartości 0: setSelectedIndex(prev => Math.max(prev - 1, 0)). Można również ustawić ograniczenie do wartości -1 (brak zaznaczenia) przy przejściu powyżej indeksu 0, umożliwiając użytkownikowi usunięcie zaznaczenia i swobodny powrót do pisania.

Gdy zostanie naciśnięty klawisz Enter, a selectedIndex >= 0, należy wybrać wyróżnioną sugestię: ustawić inputValue na suggestions[selectedIndex], zamknąć listę rozwijaną i zresetować selectedIndex do wartości -1. Jeśli żadna sugestia nie jest wyróżniona (selectedIndex ma wartość -1), należy pozwolić na kontynuowanie standardowego wysłania formularza lub wyszukiwania.

Po naciśnięciu klawisza Escape należy zamknąć listę rozwijaną, ustawiając isOpen na false, oraz zresetować selectedIndex do -1. Nie należy usuwać wartości pola tekstowego — użytkownik chce jedynie zamknąć sugestie bez wybierania elementu, zachowując wpisany tekst do dalszej edycji.

Po naciśnięciu klawisza Tab należy zamknąć listę rozwijaną, ponieważ przeglądarka i tak przeniesie fokus na następny element interaktywny. Ustawienie isOpen na false po naciśnięciu Tab gwarantuje, że lista nie pozostanie otwarta po opuszczeniu pola tekstowego. Nie trzeba wywoływać preventDefault() — należy pozwolić przeglądarce obsłużyć naturalną kolejność przechodzenia klawiszem Tab.

Wyróżniona sugestia musi być wyraźnie odróżnialna wizualnie. Należy zastosować styl aktywny do sugestii o indeksie selectedIndex: className={index === selectedIndex ? 'suggestion suggestion--active' : 'suggestion'}. Stan aktywny zazwyczaj wykorzystuje zmianę koloru tła, dzięki czemu jasno wskazuje element, który zostanie wybrany po naciśnięciu klawisza Enter.

Gdy lista sugestii ma ustawioną maksymalną wysokość i można ją przewijać, wyróżniony element może zniknąć z ekranu podczas nawigacji klawiaturą. Należy użyć tablicy refów do przechowywania elementów DOM sugestii i wywoływać listItemRefs.current[selectedIndex]?.scrollIntoView({ block: 'nearest' }) za każdym razem, gdy zmieni się selectedIndex. Wartość nearest właściwości block minimalizuje zakres przewijania.

Gdy zmieni się pole tekstowe i pojawi się nowa filtrowana lista, należy zresetować selectedIndex do -1 w ramach tej samej aktualizacji stanu albo w komponencie useEffect zależnym od sugestii. Nieaktualne indeksy wskazujące usunięte elementy mogłyby spowodować wybranie przez użytkownika niewłaściwej sugestii.

Kompletny przebieg wygląda następująco: użytkownik pisze, aby filtrować sugestie, ArrowDown wyróżnia pierwszy element, kolejne naciśnięcia ArrowDown poruszają się w dół listy, ArrowUp przesuwa zaznaczenie w górę, Enter wybiera wyróżniony element, a Escape zamyka listę bez wyboru. Obejmuje to wszystkie standardowe wzorce interakcji klawiaturowej oczekiwane przez użytkowników pól autouzupełniania.

Podczas obsługi ArrowDown i ArrowUp w polu tekstowym należy zawsze wywoływać e.preventDefault(). Bez tego ArrowDown przenosi kursor tekstowy na koniec, a ArrowUp na początek tekstu. Te ruchy kursora kolidowałyby z nawigacją za pomocą selectedIndex, powodując mylące działanie.

Co powinno się stać, gdy użytkownik naciśnie Enter, a sugestia o indeksie selectedIndex = 2 będzie wyróżniona?

Należy obsłużyć zdarzenie onKeyDown w polu wejściowym. ArrowDown zwiększa selectedIndex (z ograniczeniem do wartości max), ArrowUp zmniejsza tę wartość (z ograniczeniem do 0 lub -1), Enter wybiera wyróżniony element, Escape zamyka listę bez wybierania, a Tab zamyka ją i pozwala przeglądarce przenieść fokus. Dla klawiszy strzałek należy zawsze wywoływać preventDefault i przewijać listę tak, aby wyróżniony element był widoczny.