Navegación con teclado en listas de sugerencias

Asocie el controlador del teclado al evento onKeyDown del elemento de entrada, no a onKeyPress (obsoleto) ni a onKeyUp. keyDown se dispara antes de que el carácter aparezca en el campo, lo que permite interceptar ArrowDown, ArrowUp, Enter y Escape antes de que tengan cualquier efecto predeterminado del navegador.

Cuando el usuario pulse ArrowDown, incremente selectedIndex en 1, limitándolo como máximo a suggestions.length - 1: setSelectedIndex(prev => Math.min(prev + 1, suggestions.length - 1)). Llame también a e.preventDefault() para impedir que el cursor salte al final del texto del campo, que es el comportamiento predeterminado del navegador para ArrowDown en los campos de texto.

Cuando el usuario pulse ArrowUp, disminuya selectedIndex en 1, limitándolo como mínimo a 0: setSelectedIndex(prev => Math.max(prev - 1, 0)). También puede limitarlo a -1 (sin selección) al subir por encima del índice 0, para permitir que el usuario quite la selección y vuelva a escribir libremente.

Cuando se pulse Enter y selectedIndex >= 0, seleccione la sugerencia resaltada: establezca inputValue en suggestions[selectedIndex], cierre la lista desplegable y restablezca selectedIndex a -1. Si no hay ninguna sugerencia resaltada (selectedIndex es -1), permita que continúe el envío normal del formulario o la acción de búsqueda.

Cuando se pulse Escape, cierre la lista desplegable estableciendo isOpen en false y restablezca selectedIndex a -1. No borre el valor del campo: el usuario solo quiere descartar las sugerencias sin seleccionar ninguna y conservar el texto escrito para seguir editándolo.

Cuando se pulse Tab, cierre la lista desplegable porque el navegador trasladará el foco al siguiente elemento enfocable de todos modos. Establecer isOpen en false al pulsar Tab garantiza que la lista no permanezca abierta después de que el foco abandone el campo. No necesita llamar a preventDefault(): deje que el navegador gestione el orden natural de tabulación.

La sugerencia resaltada debe distinguirse visualmente. Aplique un estilo activo a la sugerencia cuyo índice sea selectedIndex: className={index === selectedIndex ? 'suggestion suggestion--active' : 'suggestion'}. El estado activo suele utilizar un cambio de color de fondo para dejar claro qué elemento se seleccionará al pulsar Enter.

Cuando la lista de sugerencias tenga una altura máxima y se desplace, el elemento resaltado puede salir de la pantalla durante la navegación con el teclado. Use un array de refs para almacenar los elementos DOM de las sugerencias y llame a listItemRefs.current[selectedIndex]?.scrollIntoView({ block: 'nearest' }) cada vez que cambie selectedIndex. El valor de bloque nearest minimiza la cantidad de desplazamiento.

Cuando cambie el campo de entrada y aparezca una nueva lista filtrada, restablezca selectedIndex a -1 en la misma actualización de estado o en un useEffect que dependa de las sugerencias. Los índices obsoletos que apunten a elementos eliminados harían que el usuario seleccionara la sugerencia equivocada.

Flujo completo del usuario: escribe para filtrar, ArrowDown resalta el primer elemento, más pulsaciones de ArrowDown recorren la lista, ArrowUp permite retroceder, Enter selecciona el elemento resaltado y Escape descarta las sugerencias sin seleccionar ninguna. Esto cubre todos los patrones de interacción estándar que los usuarios esperan de un campo de autocompletado.

Llame siempre a e.preventDefault() al gestionar ArrowDown y ArrowUp dentro de un campo de texto. Sin esta llamada, ArrowDown mueve el cursor de texto al final y ArrowUp lo mueve al principio. Estos movimientos del cursor entrarían en conflicto con la navegación mediante el índice seleccionado y generarían un comportamiento confuso.

¿Qué debe ocurrir cuando el usuario pulsa Enter con una sugerencia resaltada en selectedIndex = 2?

Gestione onKeyDown en el campo de entrada. ArrowDown incrementa selectedIndex (limitado al valor máximo), ArrowUp lo decrementa (limitado a 0 o -1), Enter selecciona el elemento resaltado, Escape cierra sin seleccionar y Tab cierra y permite que el navegador mueva el foco. Llame siempre a preventDefault con las teclas de flecha y desplace el elemento resaltado hasta que sea visible.