Tengo algunas dificultades importantes al tratar de hacer que mi tabla se desplace cuando recorro las filas de la tabla con onKeyDown . Lo que parece estar sucediendo es que el event en realidad no cambia cuando se usa el teclado, aunque selected está resaltando la fila seleccionada correctamente. Si se hace clic en una fila de la tabla en el medio de la tabla, la tabla se desplazará solo la primera vez que se presione el teclado hacia arriba o hacia abajo. (lo cual tiene sentido ya que es un nuevo evento).

Intenté envolver la función handleKeyDown en useCallback en caso de que perdiera una referencia entre los renderizados, pero no importó.

¿Alguien tiene alguna sugerencia sobre cómo puedo obtener un nuevo evento al presionar una tecla?

Dejo las funciones principales aquí para que las vean, sin embargo, puede encontrar un Sandbox que funcione con el problema aquí: https://codesandbox.io/s/basictable-demo-material-ui-forked-54frpm?file= /demo.tsx

 const handleKeyDown = (event) => { event.preventDefault(); console.log(event.target); scrollIntoView(event.target); if (event.key === "ArrowUp") { if (selected === rows[0].id) return; setSelected(getNextRow(rows, selected, "up")); } if (event.key === "ArrowDown") { if (selected === rows[rows.length - 1].id) return; setSelected(getNextRow(rows, selected, "down")); } };

 <TableRow key={row.id} sx={{ "&:last-child td, &:last-child th": { border: 0 } }} selected={isRowSelected(row.id)} onClick={() => handleSetSelected(row.id)} onKeyDown={handleKeyDown} tabIndex={0}

 const isRowSelected = (rowId) => { return rowId === selected; }; const scrollIntoView = (element) => { if (element) { element.scrollIntoView({ behavior: "smooth", block: "center" }); } };

 const getNextRow = (rows, selected, direction) => { const index = rows.findIndex((row) => row.id === selected); if (direction === "up") return rows[index - 1].id; if (direction === "down") return rows[index + 1].id; }

Los eventos se registran en la consola. Si hace clic en la primera fila, presiona la flecha hacia abajo en su teclado 2 o 3 veces, puede inspeccionar los elementos registrados y confirmar que son todos de la fila en la que realmente se hizo clic, y no los seleccionados con el teclado.

Gracias por su ayuda de antemano.

Stephan Bakkelund Valois