Navigazione da tastiera nelle liste di suggerimenti

Associare il gestore della tastiera all'evento onKeyDown dell'elemento input, non a onKeyPress (deprecato) né a onKeyUp. keyDown si verifica prima che il carattere compaia nell'input, consentendo di intercettare ArrowDown, ArrowUp, Enter ed Escape prima che abbiano qualsiasi effetto predefinito del browser.

Quando l'utente preme ArrowDown, incrementare selectedIndex di 1, limitandolo a un massimo di suggestions.length - 1: setSelectedIndex(prev => Math.min(prev + 1, suggestions.length - 1)). Chiamare inoltre e.preventDefault() per impedire al cursore di spostarsi alla fine del testo nell'input, comportamento predefinito del browser per ArrowDown negli input di testo.

Quando l'utente preme ArrowUp, decrementare selectedIndex di 1, limitandolo a un minimo di 0: setSelectedIndex(prev => Math.max(prev - 1, 0)). È anche possibile scegliere di limitarlo a -1, cioè nessuna selezione, quando si supera l'indice 0, consentendo all'utente di "deselezionare" e tornare a digitare liberamente.

Quando si preme Enter e selectedIndex >= 0, selezionare il suggerimento evidenziato: impostare inputValue su suggestions[selectedIndex], chiudere l'elenco a discesa e reimpostare selectedIndex su -1. Se non è evidenziato alcun suggerimento (selectedIndex è -1), consentire il normale invio del modulo o l'azione di ricerca.

Quando si preme Escape, chiudere l'elenco a discesa impostando isOpen su false e reimpostare selectedIndex su -1. Non cancellare il valore dell'input: l'utente vuole soltanto chiudere i suggerimenti senza selezionarne uno, mantenendo il testo digitato per poterlo modificare ulteriormente.

Quando si preme Tab, chiudere l'elenco a discesa perché il browser sposterà comunque il focus sull'elemento successivo a cui è possibile accedere tramite tastiera. Impostare isOpen su false quando viene premuto Tab garantisce che l'elenco non rimanga aperto dopo che il focus ha lasciato l'input. Non è necessario chiamare preventDefault(): lasciare che il browser gestisca il naturale ordine di tabulazione.

Il suggerimento evidenziato deve essere visivamente distinto. Applicare uno stile attivo al suggerimento in corrispondenza di selectedIndex: className={index === selectedIndex ? 'suggestion suggestion--active' : 'suggestion'}. Lo stato attivo usa in genere un cambiamento del colore di sfondo, rendendo chiaro quale elemento verrà selezionato premendo Enter.

Quando l'elenco dei suggerimenti ha un'altezza massima e scorre, l'elemento evidenziato può uscire dall'area visibile durante la navigazione da tastiera. Usare un array di ref per memorizzare gli elementi DOM dei suggerimenti e chiamare listItemRefs.current[selectedIndex]?.scrollIntoView({ block: 'nearest' }) ogni volta che cambia selectedIndex. Il valore nearest di block riduce al minimo la quantità di scorrimento.

Quando cambia l'input e compare un nuovo elenco filtrato, reimpostare selectedIndex su -1 nello stesso aggiornamento di stato oppure in un useEffect che dipende dai suggerimenti. Gli indici obsoleti che puntano a elementi rimossi farebbero selezionare all'utente il suggerimento sbagliato.

Flusso completo dell'utente: l'utente digita per filtrare, ArrowDown evidenzia il primo elemento, ulteriori pressioni di ArrowDown fanno avanzare nell'elenco, ArrowUp risale, Enter seleziona l'elemento evidenziato ed Escape chiude senza selezionare. Questo copre tutti i modelli standard di interazione da tastiera che gli utenti si aspettano da un campo di completamento automatico.

Chiamare sempre e.preventDefault() quando si gestiscono ArrowDown e ArrowUp all'interno di un input di testo. Senza questa chiamata, ArrowDown sposta il cursore alla fine del testo e ArrowUp lo sposta all'inizio. Questi spostamenti del cursore entrerebbero in conflitto con la navigazione tramite selectedIndex, creando un comportamento fonte di confusione.

Cosa dovrebbe accadere quando l'utente preme Enter con un suggerimento evidenziato in selectedIndex = 2?

Gestisca onKeyDown sull'input. ArrowDown incrementa selectedIndex (limitato al valore massimo), ArrowUp lo decrementa (limitato a 0 o -1), Enter seleziona l'elemento evidenziato, Escape chiude senza selezionare, Tab chiude e lascia che il browser sposti il focus. Applichi sempre preventDefault ai tasti freccia e faccia scorrere l'elemento evidenziato fino a renderlo visibile.