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)}
>