Necesita almacenar el índice de pestaña actual en el estado y actualizarlo en keydown eventListener

 import "./styles.css"; import { useState, useEffect } from "react"; import users from "./data"; export default function App() { const [searchValue, setSearchValue] = useState(""); const [currentTab, setCurrentTab] = useState(0); const searchResults = users.filter( (user) => searchValue.trim() && user.includes(searchValue.trim()) ); useEffect(() => { const handleKeyDown = (e) => { const keyCode = e.keyCode; if (keyCode == 38 && searchResults.length - 1 > currentTab) setCurrentTab(currentTab + 1); if (keyCode == 40 && currentTab >= 1) setCurrentTab(currentTab - 1); }; window.addEventListener("keydown", handleKeyDown); return () => window.removeEventListener("keydown", handleKeyDown); }, [searchResults, currentTab]); return ( <div> <input type="text" value={searchValue} onChange={(e) => { setSearchValue(e.target.value); setCurrentTab(0); }} /> <ul className="search-result"> {searchResults.map((result, i) => ( <li className={currentTab === i ? "active" : ""}>{result}</li> ))} </ul> </div> ); }

Creé un sandbox , puedes verificarlo

¿Desea tabular para cada <li> (resultado de búsqueda) y usar las teclas de flecha arriba/abajo para navegar por la lista?

Debe tener cuidado al usar valores positivos para tabindex . Rara vez debe usarse porque cambia el orden de enfoque predeterminado del navegador al que están acostumbrados la mayoría de los usuarios. El orden de enfoque predeterminado es el orden DOM. En su caso, si desea que el usuario tabule a cada <li> en orden, no necesita un valor positivo para tabindex porque sus elementos <li> ya están en el orden en que desea que se tabulen. Simplemente configúrelos todos en 0. Un valor de 0 significa que el elemento DOM debe insertarse en el orden de tabulación en el orden DOM normal.

 <ul className="search-result"> <li tabindex="0">title here...</li> <li tabindex="0">title here...</li> <li tabindex="0">title here...</li> . . . </ul>

Ahora, dicho esto, los elementos solo deberían tener tabindex="0" si son elementos interactivos . Un <li> normalmente no es un elemento interactivo, por lo que será confuso tabularlo. ¿Qué puede hacer el usuario una vez que tabula en <li> ? ¿Pueden presionar enter o espacio para seleccionarlo? Si el usuario no puede interactuar con ese elemento, entonces no debería ser una tabulación.

Por lo general, el <li> contiene cosas que son interactivas, como enlaces, botones, casillas de verificación, etc. Esos elementos ya son tabulaciones predeterminadas y no necesitan un tabindex .

En cuanto al uso de las teclas de flecha arriba/abajo para la navegación, nuevamente, solo debería poder usar la flecha hacia los elementos que son interactivos. Normalmente tengo un controlador onkeydown en <ul> y escucha las teclas de flecha y ajusta el tabindex para cada elemento. Pero solo hago esto cuando quiero que toda mi lista sea una tabulación y el usuario debe usar la flecha hacia arriba/abajo para ir entre cada elemento de la lista. En su caso, parece que desea ambos comportamientos, por lo que hice la pregunta al comienzo de mi respuesta.

Si la lista se trata como una tabulación, todos los elementos <li> tendrán un tabindex="-1" excepto el <li> que tiene el foco. Tendrá tabindex="0" . De esa forma, el usuario puede pasar a la lista como un todo y el foco irá al elemento de la lista que tuvo el foco por última vez. El usuario puede subir/bajar a través de la lista.

Cuando el usuario presiona arriba/abajo, todo lo que tiene que hacer es cambiar tabindex de 0 a -1 para el elemento de la lista actualmente enfocado y cambiar tabindex de -1 a 0 para el elemento de la lista al que está moviendo el foco, y luego llamar al focus() en el elemento recién enfocado.