Merge pull request #2284

* [#CODAP-1067] Feature: Case Table editing behavior better matches V2

* chore: code review tweaks

Author: bfinzer

v3/src/components/case-table/collection-table.tsx

@@ -226,20 +226,26 @@ export const CollectionTable = observer(function CollectionTable(props: IProps)
     }
   }, [collectionTableModel?.rows, collectionTableModel?.inputRowIndex, showInputRow])
 
-  const { handleSelectedCellChange, navigateToNextRow } = useSelectedCell(gridRef, columns, rows)
+  const { handleSelectedCellChange, navigateToNextCell, navigateToNextRow } = useSelectedCell(gridRef, columns, rows)
 
   const handleCellKeyDown = useCallback((args: TCellKeyDownArgs, event: CellKeyboardEvent) => {
     // By default in RDG, the enter/return key simply enters/exits edit mode without moving the
     // selected cell. In CODAP, the enter/return key should accept the edit _and_ advance to the
     // next row. To achieve this in RDG, we provide this callback, which is called before RDG
     // handles the event internally. If we get an enter/return key while in edit mode, we handle
     // it ourselves and call `preventGridDefault()` to prevent RDG from handling the event itself.
-    if (args.mode === "EDIT" && event.key === "Enter") {
+    if (args.mode === "EDIT" && ["Enter", "Tab", "ArrowUp", "ArrowDown"].includes(event.key)) {
       // complete the cell edit
       args.onClose(true)
       // prevent RDG from handling the event
       event.preventGridDefault()
-      navigateToNextRow(event.shiftKey)
+      if (["Enter", "ArrowUp", "ArrowDown"].includes(event.key)) {
+        const reverse = event.shiftKey || event.key === "ArrowUp"
+        navigateToNextRow(reverse)
+      }
+      if (event.key === "Tab") {
+        navigateToNextCell(event.shiftKey)
+      }
     }
     if ((event.key === "ArrowDown" || event.key === "ArrowUp")) {
       const caseId = args.row.__id__
@@ -286,7 +292,7 @@ export const CollectionTable = observer(function CollectionTable(props: IProps)
         }
       }
     }
-  }, [collection, collectionId, data, navigateToNextRow, onScrollRowRangeIntoView])
+  }, [collection, collectionId, data, navigateToNextCell, navigateToNextRow, onScrollRowRangeIntoView])
 
   const handleClick = (event: React.PointerEvent<HTMLDivElement>) => {
     // See if mouse has moved beyond kMouseMovementThreshold since initial mousedown

v3/src/components/case-table/use-selected-cell.ts

@@ -47,6 +47,33 @@ export function useSelectedCell(gridRef: React.RefObject<DataGridHandle | null>,
     }
   }, [collectionTableModel, columns, gridRef])
 
+  const navigateToNextCell = useCallback((back = false) => {
+    if (selectedCell.current?.columnId) {
+      // column index
+      const currentRowIdx = selectedCell.current.rowIdx
+      const currentIdx = columns.findIndex(column => column.key === selectedCell.current?.columnId)
+      const rightmost = currentIdx === columns.length - 1
+      const first = currentIdx === 1
+      if (first && currentRowIdx === 0 && back) {
+        // don't navigate left from the first cell
+        return
+      }
+      const idx = back
+        ? first ? Math.max(1, columns.length - 1) : currentIdx - 1
+        : rightmost ? 1 : currentIdx + 1
+      // row index
+      const rowIdx = back
+        ? first ? Math.max(0, currentRowIdx - 1) : currentRowIdx
+        : rightmost ? currentRowIdx + 1 : currentRowIdx
+      const position = { idx, rowIdx }
+      // setTimeout so it occurs after handling of current event completes
+      setTimeout(() => {
+        collectionTableModel?.scrollRowIntoView(rowIdx)
+        gridRef.current?.selectCell(position, true)
+      })
+    }
+  }, [collectionTableModel, columns, gridRef])
+
   const refreshSelectedCell = useCallback(() => {
     if (selectedCell.current) {
       const { columnId, rowId } = selectedCell.current
@@ -79,5 +106,5 @@ export function useSelectedCell(gridRef: React.RefObject<DataGridHandle | null>,
     }
   }, [blockingDataset, refreshSelectedCellDebounced])
 
-  return { selectedCell: selectedCell.current, handleSelectedCellChange, navigateToNextRow }
+  return { selectedCell: selectedCell.current, handleSelectedCellChange, navigateToNextCell, navigateToNextRow }
 }