código:-
const handleKeyDown = (event, ID) => { const active = document.activeElement; active.addEventListener('keydown', function (event) { switch (event.key) { case "ArrowUp": active?.previousElementSibling?.focus(); break; case "ArrowDown": active?.nextElementSibling?.focus(); event.preventDefault(); break; default: break; } }) } <tr key={playdata.idx} tabIndex={playdata.idx} className="border_bottom" onKeyDown={(e) => handleKeyDown(e, playdata.idx)}> <td style={{ color: "white", width: "200px" }}> <img src={`data:image/jpeg;base64,${base64}`} alt="Clip Thumbnail" width="50%" /> </td>Cuando hago clic en la fila, me muestra el foco y puedo navegar hacia arriba y hacia abajo, pero cuando hago clic en el exterior, el foco de la fila desaparece. Quiero que cuando el usuario haga clic fuera de la fila/tabla, permanezca enfocado donde quedaron los focos. ¿Cómo resolver eso?
Ya tiene activeElement , solo lo reutilizamos para document.click que es para escuchar los clics de todas las áreas y filtrarlos con las áreas esperadas (en su caso, los elementos esperados son .border_bottom )
let active = document.activeElement; //this variable should be global to state your previous active element document.addEventListener("click", function(event){ event.preventDefault(); //if the current clicked element has your expected class, we should assign a new active element if(event.target.classList.contains("border_bottom")){ //you can add another class for the check instead of `border_bottom` active = event.target; //set a new active element } //focus only on active elements active?.focus(); });