Input controllato con lista di suggerimenti

Un componente di completamento automatico ha due parti principali: un campo di testo controllato e un elenco a discesa di suggerimenti. Il campo si trova nel normale flusso del documento, mentre l'elenco a discesa è posizionato in modo assoluto direttamente sotto di esso. Insieme funzionano come un unico widget interattivo, sebbene siano elementi DOM distinti.

Sono necessarie quattro variabili di stato: inputValue (stringa — ciò che è stato digitato), suggestions (array — gli elementi che corrispondono attualmente), isOpen (booleano — indica se l'elenco a discesa è visibile) e selectedIndex (numero — indica quale suggerimento è evidenziato per la navigazione da tastiera; parte da -1 quando non è selezionato alcun elemento).

Rendere l'input completamente controllato: value={inputValue} e onChange={e => setInputValue(e.target.value)}. In questo modo React controlla completamente il testo visualizzato. Ogni pressione di un tasto aggiorna lo stato, attivando un nuovo rendering con il nuovo valore. Non usare mai un input non controllato per il completamento automatico: è necessario poter leggere e impostare il valore a livello programmatico.

Quando i suggerimenti provengono da un array locale, applicare il filtro a ogni rendering in base a inputValue: confrontare ogni elemento usando item.toLowerCase().includes(inputValue.toLowerCase()). È possibile calcolarlo con useMemo se l'elenco è grande, per evitare di ricalcolarlo a ogni nuovo rendering. Per gli elenchi piccoli, il filtro inline va bene.

Aprire l'elenco a discesa quando inputValue.length > 0 e suggestions.length > 0. Chiuderlo quando l'input perde il focus, con un piccolo ritardo per consentire prima la registrazione dei clic sui suggerimenti, quando viene selezionato un suggerimento o quando viene premuto il tasto Escape. Impostare isOpen di conseguenza per controllare il rendering condizionale.

L'evento onBlur si verifica quando l'input perde il focus, ad esempio quando l'utente fa clic su un suggerimento. Se si chiude immediatamente l'elenco a discesa durante il blur, il clic sul suggerimento non viene registrato perché l'elenco scompare prima che il clic venga attivato. Usare setTimeout(() => setIsOpen(false), 150) per dare al clic il tempo di essere registrato.

Posizionare l'elenco a discesa con position: absolute in modo che si sovrapponga al contenuto sottostante invece di spingerlo verso il basso. Impostare uno z-index elevato (100+) affinché venga visualizzato sopra gli altri contenuti. Impostare un max-height con overflow-y: auto per evitare che l'elenco diventi troppo alto quando sono presenti molti risultati.

Ogni suggerimento dovrebbe avere un gestore onClick: onClick={() => { setInputValue(suggestion); setIsOpen(false); }}. In questo modo l'input viene impostato sul suggerimento selezionato e l'elenco a discesa viene chiuso. La selezione risulta immediata e naturale, in linea con il comportamento che gli utenti si aspettano dai campi di completamento automatico.

Un'alternativa al timeout per il blur consiste nell'usare onMouseDown={e => e.preventDefault()} su ogni elemento suggerimento. In questo modo si impedisce a mousedown di sottrarre il focus all'input, quindi l'evento blur non si verifica quando si fa clic su un suggerimento. L'input mantiene il focus e il gestore del clic viene eseguito senza problemi.

Un buon completamento automatico deve essere navigabile da tastiera. L'utente deve poter premere ArrowDown per evidenziare il primo suggerimento, continuare a premerlo per scorrere l'elenco, premere Enter per selezionare e premere Escape per chiudere senza selezionare. Questa funzionalità si implementa gestendo onKeyDown sull'elemento input.

Ogni volta che l'utente digita e inputValue cambia, reimpostare selectedIndex su -1. In questo modo si cancella qualsiasi selezione precedente da tastiera, così il nuovo insieme di suggerimenti filtrati non presenta inizialmente alcun elemento evidenziato. Un indice di selezione obsoleto che punta a un elemento diverso dopo la modifica dell'elenco è fonte di confusione e non è corretto.

Perché usare onMouseDown con e.preventDefault() sugli elementi suggerimento invece di affidarsi a un timeout per il blur?

Un widget di completamento automatico richiede quattro variabili di stato: inputValue, suggestions, isOpen e selectedIndex. Utilizzare un input controllato, filtrare i suggerimenti in base all'input e gestire la visibilità dell'elenco a discesa tramite isOpen. Gestire la condizione di competizione blur-before-click con un timeout oppure con onMouseDown preventDefault. Reimpostare selectedIndex ogni volta che cambia l'input.