Input controlado con lista de sugerencias

Un componente de autocompletado tiene dos partes principales: un campo de texto controlado y una lista desplegable de sugerencias. El campo se encuentra en el flujo normal del documento y la lista desplegable se posiciona de forma absoluta justo debajo. Juntos funcionan como un único widget interactivo, aunque son elementos DOM separados.

Necesita cuatro variables de estado: inputValue (string: lo que se ha escrito), suggestions (array: los elementos coincidentes actuales), isOpen (boolean: indica si la lista desplegable está visible) y selectedIndex (number: indica qué sugerencia está resaltada para la navegación con el teclado; empieza en -1 cuando no hay ninguna seleccionada).

Haga que el campo de entrada esté completamente controlado: value={inputValue} y onChange={e => setInputValue(e.target.value)}. Así React controla por completo el texto mostrado. Cada pulsación de tecla actualiza el estado, lo que desencadena un nuevo renderizado con el valor actualizado. No use nunca un campo de entrada no controlado para el autocompletado: necesita leer y establecer el valor mediante programación.

Cuando las sugerencias proceden de un array local, filtre en cada renderizado según inputValue: compare cada elemento mediante item.toLowerCase().includes(inputValue.toLowerCase()). Puede calcularlo con useMemo si la lista es grande, para evitar repetir el cálculo en cada renderizado. En listas pequeñas, el filtrado directo es suficiente.

Abra la lista desplegable cuando inputValue.length > 0 y suggestions.length > 0. Ciérrela cuando el campo pierda el foco (con un pequeño retraso para permitir que los clics en las sugerencias se registren primero), cuando se seleccione una sugerencia o cuando se pulse la tecla Escape. Establezca isOpen según corresponda para controlar el renderizado condicional.

El evento onBlur se dispara cuando el campo de entrada pierde el foco, lo que ocurre cuando el usuario hace clic en una sugerencia. Si cierra la lista desplegable inmediatamente al producirse el desenfoque, el clic en la sugerencia nunca se registra porque la lista desaparece antes de que se dispare el clic. Use setTimeout(() => setIsOpen(false), 150) para dar tiempo a que el clic se registre.

Posicione la lista desplegable con position: absolute para que se superponga al contenido situado debajo del campo, en lugar de desplazarlo. Establezca un z-index alto (100 o superior) para que aparezca por encima del resto del contenido. Establezca un max-height junto con overflow-y: auto para evitar que la lista crezca demasiado cuando haya muchos resultados.

Cada elemento de sugerencia debe tener un controlador onClick: onClick={() => { setInputValue(suggestion); setIsOpen(false); }}. Esto establece en el campo la sugerencia seleccionada y cierra la lista desplegable. La selección resulta inmediata y natural, tal como esperan los usuarios de los campos de autocompletado.

Una alternativa al temporizador de desenfoque consiste en usar onMouseDown={e => e.preventDefault()} en cada elemento de sugerencia. Esto evita que el evento mousedown quite el foco al campo de entrada, por lo que el evento de desenfoque no se dispara al hacer clic en una sugerencia. El campo conserva el foco y el controlador del clic se ejecuta correctamente.

Un buen autocompletado debe poder usarse con el teclado. El usuario debe poder pulsar ArrowDown para resaltar la primera sugerencia, seguir pulsando la tecla para avanzar por la lista, pulsar Enter para seleccionar y pulsar Escape para cerrar sin seleccionar. Esto se implementa gestionando onKeyDown en el elemento de entrada.

Cada vez que el usuario escribe y cambia inputValue, restablezca selectedIndex a -1. Esto elimina cualquier selección anterior del teclado para que el nuevo conjunto de sugerencias filtradas comience sin ningún elemento resaltado. Un índice de selección obsoleto que apunte a otro elemento después de cambiar la lista resulta confuso e incorrecto.

¿Por qué se usa onMouseDown con e.preventDefault() en los elementos de sugerencia en lugar de depender de un temporizador de desenfoque?

Un widget de autocompletado necesita cuatro variables de estado: inputValue, suggestions, isOpen y selectedIndex. Use un campo de entrada controlado, filtre las sugerencias según el contenido del campo y controle la visibilidad de la lista desplegable mediante isOpen. Gestione la condición de carrera entre el desenfoque y el clic con un temporizador o con onMouseDown y preventDefault. Restablezca selectedIndex cada vez que cambie el campo de entrada.