diff --git a/packages/web/src/formview/FormView.js b/packages/web/src/formview/FormView.js index 95b2a2e14..6a281ef1c 100644 --- a/packages/web/src/formview/FormView.js +++ b/packages/web/src/formview/FormView.js @@ -99,6 +99,7 @@ export default function FormView(props) { const showMenu = useShowMenu(); const focusFieldRef = React.useRef(null); const [currentCell, setCurrentCell] = React.useState([0, 0]); + const cellRefs = React.useRef({}); const rowCount = Math.floor((wrapperHeight - 20) / rowHeight); const columnChunks = _.chunk(formDisplay.columns, rowCount); @@ -120,6 +121,10 @@ export default function FormView(props) { ); }; + const setCellRef = (row, col, element) => { + cellRefs.current[`${row},${col}`] = element; + }; + React.useEffect(() => { if (tabVisible) { if (focusFieldRef.current) focusFieldRef.current.focus(); @@ -136,6 +141,14 @@ export default function FormView(props) { }; const handleCursorMove = (event) => { + if (event.ctrlKey) { + switch (event.keyCode) { + case keycodes.leftArrow: + return moveCursor(currentCell[0], 0); + case keycodes.rightArrow: + return moveCursor(currentCell[0], columnChunks.length * 2 - 1); + } + } switch (event.keyCode) { case keycodes.leftArrow: return moveCursor(currentCell[0], currentCell[1] - 1); @@ -159,10 +172,8 @@ export default function FormView(props) { const handleKeyNavigation = (event) => { if (event.ctrlKey) { switch (event.keyCode) { - case keycodes.leftArrow: case keycodes.upArrow: return 'previous'; - case keycodes.rightArrow: case keycodes.downArrow: return 'next'; case keycodes.home: @@ -173,6 +184,15 @@ export default function FormView(props) { } }; + const scrollIntoView = (cell) => { + const element = cellRefs.current[`${cell[0]},${cell[1]}`]; + if (element) element.scrollIntoView(); + }; + + React.useEffect(() => { + scrollIntoView(currentCell); + }, [rowData]); + const handleKeyDown = (event) => { const navigation = handleKeyNavigation(event); if (navigation) { @@ -183,6 +203,7 @@ export default function FormView(props) { const moved = handleCursorMove(event); if (moved) { setCurrentCell(moved); + scrollIntoView(moved); event.preventDefault(); return; } @@ -227,6 +248,7 @@ export default function FormView(props) { data-col={chunkIndex * 2} // @ts-ignore isSelected={currentCell[0] == rowIndex && currentCell[1] == chunkIndex * 2} + ref={(element) => setCellRef(rowIndex, chunkIndex * 2, element)} > @@ -236,6 +258,7 @@ export default function FormView(props) { data-col={chunkIndex * 2 + 1} // @ts-ignore isSelected={currentCell[0] == rowIndex && currentCell[1] == chunkIndex * 2 + 1} + ref={(element) => setCellRef(rowIndex, chunkIndex * 2 + 1, element)} >