[terra-data-grid] Flowsheet keyboard navigation

packages/terra-data-grid/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Added
+  * Added keyboard navigation support for sections.
+
 * Changed
   * Removed console warning message when no pinned columns exist.
 

packages/terra-data-grid/src/DataGrid.jsx

@@ -202,7 +202,6 @@ const DataGrid = forwardRef((props, ref) => {
   // if columns are not visible then set the first selectable row index to 1
   const [focusedRow, setFocusedRow] = useState(hasVisibleColumnHeaders ? 0 : 1);
   const [focusedCol, setFocusedCol] = useState(0);
-  const [gridHasFocus, setGridHasFocus] = useState(false);
 
   // Aria live region message management
   const [cellAriaLiveMessage, setCellAriaLiveMessage] = useState(null);
@@ -221,6 +220,10 @@ const DataGrid = forwardRef((props, ref) => {
     hasSelectableRows && columnIndex < displayedColumns.length && displayedColumns[columnIndex].id === WorklistDataGridUtils.ROW_SELECTION_COLUMN.id
   ), [displayedColumns, hasSelectableRows]);
 
+  const isSection = useCallback((rowIndex) => (
+    grid.current.rows[rowIndex].hasAttribute('data-section-id')
+  ), []);
+
   const setFocusedRowCol = useCallback((newRowIndex, newColIndex, makeActiveElement) => {
     setCellAriaLiveMessage(null);
     setFocusedRow(newRowIndex);
@@ -232,20 +235,29 @@ const DataGrid = forwardRef((props, ref) => {
     };
 
     if (makeActiveElement) {
-      // Set focus on input field (checkbox) of row selection cells.
-      let focusedCell = grid.current.rows[newRowIndex].cells[newColIndex];
-      if (isRowSelectionCell(newColIndex) && focusedCell.getElementsByTagName('input').length > 0) {
-        [focusedCell] = focusedCell.getElementsByTagName('input');
-      }
+      let focusedCell;
+      if (isSection(newRowIndex)) {
+        [focusedCell] = grid.current.rows[newRowIndex].cells;
+
+        if (!focusedCell.hasAttribute('tabindex')) {
+          focusedCell = grid.current.rows[newRowIndex].querySelector('button');
+        }
+      } else {
+        // Set focus on input field (checkbox) of row selection cells.
+        focusedCell = grid.current.rows[newRowIndex].cells[newColIndex];
+        if (isRowSelectionCell(newColIndex) && focusedCell.getElementsByTagName('input').length > 0) {
+          [focusedCell] = focusedCell.getElementsByTagName('input');
+        }
 
-      // Set focus to column header button, if it exists
-      if (newRowIndex === 0 && !focusedCell.hasAttribute('tabindex')) {
-        focusedCell = focusedCell.querySelector('[role="button"]');
+        // Set focus to column header button, if it exists
+        if (newRowIndex === 0 && !focusedCell.hasAttribute('tabindex')) {
+          focusedCell = focusedCell.querySelector('[role="button"]');
+        }
       }
 
       focusedCell?.focus();
     }
-  }, [isRowSelectionCell, displayedColumns]);
+  }, [displayedColumns, isSection, isRowSelectionCell]);
 
   // The focus is handled by the DataGrid. However, there are times
   // when the other components may want to change the currently focus
@@ -264,66 +276,44 @@ const DataGrid = forwardRef((props, ref) => {
   // -------------------------------------
 
   const handleMoveCellFocus = (fromCell, toCell) => {
+    if (!isSection(toCell.row)) {
     // Obtain coordinate rectangles for grid container, column header, and new cell selection
-    const gridContainerRect = tableContainerRef.current.getBoundingClientRect();
-    const columnHeaderRect = grid.current.rows[0].cells[toCell.col].getBoundingClientRect();
-    const nextCellRect = grid.current.rows[toCell.row].cells[toCell.col].getBoundingClientRect();
-
-    // Calculate horizontal scroll offset for right boundary
-    if (nextCellRect.right > gridContainerRect.right) {
-      tableContainerRef.current.scrollBy(nextCellRect.right - gridContainerRect.right, 0);
-    } else {
+      const gridContainerRect = tableContainerRef.current.getBoundingClientRect();
+      const columnHeaderRect = grid.current.rows[0].cells[toCell.col].getBoundingClientRect();
+      const nextCellRect = grid.current.rows[toCell.row].cells[toCell.col].getBoundingClientRect();
+
+      // Calculate horizontal scroll offset for right boundary
+      if (nextCellRect.right > gridContainerRect.right) {
+        tableContainerRef.current.scrollBy(nextCellRect.right - gridContainerRect.right, 0);
+      } else {
       // Calculate horizontal scroll offset for left boundary
-      let scrollOffsetX = 0;
-      const pinnedColumnOffset = hasSelectableRows ? 1 : 0;
-      const lastPinnedColumnIndex = pinnedColumns.length - 1 + pinnedColumnOffset;
-      if (lastPinnedColumnIndex >= 0) {
-        if (toCell.col > lastPinnedColumnIndex) {
-          const lastPinnedColumnRect = grid.current.rows[toCell.row].cells[lastPinnedColumnIndex].getBoundingClientRect();
-          scrollOffsetX = nextCellRect.left - lastPinnedColumnRect.right;
+        let scrollOffsetX = 0;
+        const pinnedColumnOffset = hasSelectableRows ? 1 : 0;
+        const lastPinnedColumnIndex = pinnedColumns.length - 1 + pinnedColumnOffset;
+        if (lastPinnedColumnIndex >= 0) {
+          if (toCell.col > lastPinnedColumnIndex) {
+            const lastPinnedColumnRect = grid.current.rows[toCell.row].cells[lastPinnedColumnIndex].getBoundingClientRect();
+            scrollOffsetX = nextCellRect.left - lastPinnedColumnRect.right;
+          }
+        } else {
+          scrollOffsetX = nextCellRect.left - gridContainerRect.left;
         }
-      } else {
-        scrollOffsetX = nextCellRect.left - gridContainerRect.left;
-      }
 
-      if (scrollOffsetX < 0) {
-        tableContainerRef.current.scrollBy(scrollOffsetX, 0);
+        if (scrollOffsetX < 0) {
+          tableContainerRef.current.scrollBy(scrollOffsetX, 0);
+        }
       }
-    }
 
-    // Calculate vertical scroll offset
-    const scrollOffsetY = nextCellRect.top - columnHeaderRect.bottom;
-    if (scrollOffsetY < 0) {
-      tableContainerRef.current.scrollBy(0, scrollOffsetY);
+      // Calculate vertical scroll offset
+      const scrollOffsetY = nextCellRect.top - columnHeaderRect.bottom;
+      if (scrollOffsetY < 0) {
+        tableContainerRef.current.scrollBy(0, scrollOffsetY);
+      }
     }
 
     setFocusedRowCol(toCell.row, toCell.col, true);
   };
 
-  const handleColumnSelect = useCallback((columnId) => {
-    const columnIndex = displayedColumns.findIndex(column => column.id === columnId);
-    setFocusedRowCol(0, columnIndex);
-
-    if (onColumnSelect) {
-      onColumnSelect(columnId);
-    }
-  }, [onColumnSelect, displayedColumns, setFocusedRowCol]);
-
-  const handleRowSelectionHeaderSelect = useCallback(() => {
-    setFocusedRowCol(0, 0);
-    if (onRowSelectionHeaderSelect) {
-      onRowSelectionHeaderSelect();
-    }
-  }, [onRowSelectionHeaderSelect, setFocusedRowCol]);
-
-  const handleCellSelection = useCallback((selectionDetails) => {
-    const { columnIndex, rowIndex } = selectionDetails;
-    setFocusedRowCol(rowIndex, columnIndex);
-    if (onCellSelect) {
-      onCellSelect(selectionDetails);
-    }
-  }, [onCellSelect, setFocusedRowCol]);
-
   // -------------------------------------
   // event handlers
 
@@ -388,17 +378,26 @@ const DataGrid = forwardRef((props, ref) => {
     setCheckResizable(false);
 
     const targetElement = event.target;
+    const key = event.keyCode;
 
     // Allow default behavior if the event target is an editable field
-
-    if (event.keyCode !== KeyCode.KEY_TAB
+    if (key !== KeyCode.KEY_TAB
         && (isTextInput(targetElement)
             || ['textarea', 'select'].indexOf(targetElement.tagName.toLowerCase()) >= 0
             || (targetElement.hasAttribute('contentEditable') && targetElement.getAttribute('contentEditable') !== false))) {
       return;
     }
 
-    const key = event.keyCode;
+    // Disable horizontal navigation when section has focus
+    if ((key === KeyCode.KEY_RIGHT || key === KeyCode.KEY_LEFT)
+        && isSection(cellCoordinates.row)) {
+      event.preventDefault();
+      return;
+    }
+
+    // Get grid row count
+    const gridRowCount = grid.current.rows.length;
+
     switch (key) {
       case KeyCode.KEY_UP:
         nextRow -= 1;
@@ -432,7 +431,7 @@ const DataGrid = forwardRef((props, ref) => {
           if (event.ctrlKey) {
             // Mac: Ctrl + Cmd + Right
             // Windows: Ctrl + End
-            nextRow = rows.length;
+            nextRow = gridRowCount - 1;
           }
         } else {
           // Right key
@@ -450,7 +449,7 @@ const DataGrid = forwardRef((props, ref) => {
         if (event.ctrlKey) {
           // Though rows are zero based, the header is the first row so the rowsLength will
           // always be one more than then actual number of data rows.
-          nextRow = rows.length;
+          nextRow = gridRowCount - 1;
         }
         break;
       case KeyCode.KEY_ESCAPE:
@@ -476,7 +475,7 @@ const DataGrid = forwardRef((props, ref) => {
       onCellRangeSelect(cellCoordinates.row, cellCoordinates.col, event.keyCode);
     }
 
-    if (nextRow > rows.length || nextCol >= displayedColumns.length) {
+    if (nextRow >= gridRowCount || nextCol >= displayedColumns.length) {
       event.preventDefault(); // prevent the page from moving with the arrow keys.
       return;
     }
@@ -489,9 +488,20 @@ const DataGrid = forwardRef((props, ref) => {
     event.preventDefault(); // prevent the page from moving with the arrow keys.
   };
 
-  const onMouseDown = () => {
-    // Prevent focus event updates when triggered by mouse
-    handleFocus.current = false;
+  const handleMouseDown = (event) => {
+    // Determine cell containing click event
+    const clickTarget = event.target;
+    const targetCell = clickTarget.closest('td, th');
+
+    // Store focused cell position
+    if (targetCell) {
+      // Prevent focus event updates when triggered by mouse
+      handleFocus.current = false;
+
+      setCheckResizable(false);
+
+      setFocusedRowCol(targetCell.parentElement.rowIndex, targetCell.cellIndex);
+    }
   };
 
   /**
@@ -522,31 +532,25 @@ const DataGrid = forwardRef((props, ref) => {
         }
 
         setFocusedRowCol(newRowIndex, newColumnIndex, true);
-        setGridHasFocus(true);
       }
     }
 
     handleFocus.current = true;
   };
 
-  const onBlur = (event) => {
-    if (!event.currentTarget.contains(event.relatedTarget)) {
-      setGridHasFocus(false);
-    }
-  };
-
   // -------------------------------------
 
+  const isGridActive = grid.current?.contains(document.activeElement);
+
   return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     <div
       // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
       tabIndex={0}
       ref={gridContainerRef}
       onKeyDown={handleKeyDown}
-      onMouseDown={onMouseDown}
+      onMouseDown={handleMouseDown}
       onFocus={onFocus}
-      onBlur={onBlur}
       id={id}
       className={cx('data-grid-container')}
     >
@@ -557,7 +561,7 @@ const DataGrid = forwardRef((props, ref) => {
           sections={sections}
           ariaLabelledBy={ariaLabelledBy}
           ariaLabel={ariaLabel}
-          activeColumnIndex={(gridHasFocus && focusedRow === 0) ? focusedCol : undefined}
+          activeColumnIndex={(isGridActive && focusedRow === 0) ? focusedCol : undefined}
           isActiveColumnResizing={focusedRow === 0 && checkResizable}
           columnResizeIncrement={columnResizeIncrement}
           pinnedColumns={pinnedColumns}
@@ -567,10 +571,10 @@ const DataGrid = forwardRef((props, ref) => {
           rowHeight={rowHeight}
           rowHeaderIndex={rowHeaderIndex}
           onColumnResize={onColumnResize}
-          onColumnSelect={handleColumnSelect}
+          onColumnSelect={onColumnSelect}
           onSectionSelect={onSectionSelect}
-          onCellSelect={handleCellSelection}
-          onRowSelectionHeaderSelect={handleRowSelectionHeaderSelect}
+          onRowSelectionHeaderSelect={onRowSelectionHeaderSelect}
+          onCellSelect={onCellSelect}
           rowSelectionMode={hasSelectableRows ? 'multiple' : undefined}
           hasVisibleColumnHeaders={hasVisibleColumnHeaders}
           isStriped

packages/terra-data-grid/src/WorklistDataGrid.jsx

@@ -327,10 +327,6 @@ function WorklistDataGrid(props) {
     }
   }, [handleRowSelection, hasSelectableRows, onCellSelect]);
 
-  const handleColumnSelect = useCallback((columnId) => {
-    onColumnSelect(columnId);
-  }, [onColumnSelect]);
-
   const handleRowSelectionHeaderSelect = useCallback(() => {
     onColumnSelect(WorklistDataGridUtils.ROW_SELECTION_COLUMN.id);
   }, [onColumnSelect]);
@@ -384,7 +380,7 @@ function WorklistDataGrid(props) {
         overflowColumns={worklistDataGridOverflowColumns}
         defaultColumnWidth={defaultColumnWidth}
         columnHeaderHeight={columnHeaderHeight}
-        onColumnSelect={onColumnSelect ? handleColumnSelect : undefined}
+        onColumnSelect={onColumnSelect}
         onRowSelectionHeaderSelect={onColumnSelect ? handleRowSelectionHeaderSelect : undefined}
         onColumnResize={onColumnResize}
         onCellSelect={handleCellSelection}

packages/terra-data-grid/tests/jest/FlowsheetDataGrid.test.jsx

@@ -399,6 +399,10 @@ describe('Multi-cell selection', () => {
       />,
     );
 
+    const initialCell = wrapper.find('Row').at(2).find('td.selectable').at(1);
+    initialCell.simulate('mouseDown');
+    initialCell.simulate('keydown', { keyCode: DOWN_ARROW_KEY });
+
     const selectableCell = wrapper.find('Row').at(3).find('td.selectable').at(1);
     selectableCell.simulate('keydown', { keyCode: SPACE_KEY });
     expect(mockOnCellSelect).toHaveBeenCalledWith('4', 'Column-2');