En mi formulario, quiero usar las teclas de flecha del teclado para moverme entre los campos de entrada.

Aquí está el ejemplo de Codesandbox. (Haga clic dentro del último campo de entrada y use la tecla de flecha ARRIBA para subir al campo de entrada del hermano anterior.

Código:

 const arrowDownPosition = React.useRef(); const getCurElePosition = (eTarget) => { const mum = eTarget.parentElement.parentElement; const parent = mum.parentElement; const children = Array.from(parent.children); let taskNum; children.forEach((el, i) => { const elChild = el.children[0].children[0]; if (elChild === eTarget) { taskNum = i; } }); return [taskNum, parent, children, mum]; }; const keyUpHandler = (e) => { e.preventDefault(); if (e.key === "ArrowUp") { e.target.setSelectionRange( arrowDownPosition.current[0], arrowDownPosition.current[1] ); } }; const keyHandler = (e) => { e.stopPropagation(); const eTarget = e.target; const [elePosition, parent, children, mum] = getCurElePosition(eTarget); if (e.key === "ArrowUp") { let previousSiblingRef; children.forEach((ele, i) => { if (ele == mum && i - 1 >= 0) { previousSiblingRef = i - 1; } }); if (previousSiblingRef) { const { selectionStart, selectionEnd } = eTarget; arrowDownPosition.current = [selectionStart, selectionEnd]; const previousSibling = children[previousSiblingRef].children[0].children[0]; previousSibling.focus(); previousSibling.setSelectionRange(selectionStart, selectionEnd); } } };

La solución anterior es una manera hacky de resolver el problema. Puede ver que el símbolo de intercalación se mueve al inicio del campo de entrada anterior antes de que se mueva a la posición deseada. Estoy usando useRef para almacenar el valor.

¿Esto se debe a que no puedo detener el controlador predeterminado keyUp antes de que se ejecute mi código?

Gracias