Tastaturnavigasjon i forslagslister

Knytt tastaturbehandleren til onKeyDown-hendelsen på inndataelementet, ikke til onKeyPress (avviklet) eller onKeyUp. keyDown utløses før tegnet vises i inndatafeltet, slik at ArrowDown, ArrowUp, Enter og Escape kan fanges opp før de får noen standardvirkning i nettleseren.

Når brukeren trykker på ArrowDown, økes selectedIndex med 1, begrenset til maksimum suggestions.length - 1: setSelectedIndex(prev => Math.min(prev + 1, suggestions.length - 1)). Kall også e.preventDefault() for å hindre at markøren flyttes til slutten av teksten i inndatafeltet, som er standardoppførselen for ArrowDown i tekstfelt.

Når brukeren trykker på ArrowUp, reduseres selectedIndex med 1, begrenset til minimum 0: setSelectedIndex(prev => Math.max(prev - 1, 0)). Det kan også velges å begrense til -1 (ingen markering) når brukeren går over indeks 0, slik at brukeren kan fjerne markeringen og gå tilbake til å skrive fritt.

Når Enter trykkes og selectedIndex >= 0, velges det uthevede forslaget: angi inputValue til suggestions[selectedIndex], lukk nedtrekkslisten og tilbakestill selectedIndex til -1. Hvis ingen forslag er uthevet (selectedIndex er -1), lar du den vanlige innsendingen av skjemaet eller søkehandlingen fortsette.

Når Escape trykkes, lukkes nedtrekkslisten ved å angi isOpen til false, og selectedIndex tilbakestilles til -1. Ikke fjern inndataverdien – brukeren ønsker bare å lukke forslagene uten å velge et av dem, og vil beholde teksten som er skrevet inn for videre redigering.

Når Tab trykkes, lukkes nedtrekkslisten fordi nettleseren uansett flytter fokuset til neste fokuserbare element. Ved å angi isOpen til false ved Tab sikrer du at nedtrekkslisten ikke forblir åpen etter at fokuset forlater inndatafeltet. Det er ikke nødvendig å kalle preventDefault() – la nettleseren håndtere den naturlige tabulatorrekkefølgen.

Det uthevede forslaget må være visuelt tydelig. Bruk en aktiv stil på forslaget ved selectedIndex: className={index === selectedIndex ? 'suggestion suggestion--active' : 'suggestion'}. Aktivtilstanden bruker vanligvis en endring i bakgrunnsfargen, slik at det blir tydelig hvilket element som velges når Enter trykkes.

Når forslagslisten har en max-høyde og kan rulles, kan det uthevede elementet forsvinne utenfor skjermen under tastaturnavigering. Bruk en ref-array til å lagre DOM-elementene for forslagene, og kall listItemRefs.current[selectedIndex]?.scrollIntoView({ block: 'nearest' }) hver gang selectedIndex endres. Blokkverdien nearest minimerer mengden rulling.

Når inndata endres og en ny filtrert liste vises, tilbakestilles selectedIndex til -1 i den samme tilstandsoppdateringen eller i en useEffect som avhenger av forslagene. Foreldede indekser som peker på fjernede elementer, ville ført til at brukeren valgte feil forslag.

Den komplette brukerflyten: Brukeren skriver for å filtrere, ArrowDown uthever det første elementet, flere trykk på ArrowDown beveger seg gjennom listen, ArrowUp beveger seg opp igjen, Enter velger det uthevede elementet, og Escape lukker uten å velge. Dette dekker alle standardmønstre for tastaturinteraksjon som brukere forventer fra et autocomplete-felt.

Kall alltid e.preventDefault() når ArrowDown og ArrowUp håndteres i et tekstfelt. Uten dette flytter ArrowDown tekstmarkøren til slutten, mens ArrowUp flytter den til begynnelsen. Disse markørbevegelsene ville komme i konflikt med navigeringen ved hjelp av selectedIndex og føre til forvirrende oppførsel.

Håndter onKeyDown på inputfeltet. ArrowDown øker selectedIndex (begrenset til maksverdien), ArrowUp reduserer den (begrenset til 0 eller -1), Enter velger det uthevede elementet, Escape lukker uten å velge, og Tab lukker og lar nettleseren flytte fokus. Kall alltid preventDefault for piltastene, og rull det uthevede elementet inn i visningen.