[DataGrid] refactoring on focus cell and cols (#1421)

packages/grid/_modules_/grid/GridComponent.tsx

@@ -18,6 +18,7 @@ import { Watermark } from './components/Watermark';
 import { GridComponentProps } from './GridComponentProps';
 import { useGridColumnMenu } from './hooks/features/columnMenu/useGridColumnMenu';
 import { useGridColumns } from './hooks/features/columns/useGridColumns';
+import { useGridFocus } from './hooks/features/focus/useGridFocus';
 import { useGridSelector } from './hooks/features/core/useGridSelector';
 import { useGridKeyboardNavigation } from './hooks/features/keyboard/useGridKeyboardNavigation';
 import { useGridPagination } from './hooks/features/pagination/useGridPagination';
@@ -83,6 +84,7 @@ export const GridComponent = React.forwardRef<HTMLDivElement, GridComponentProps
     useGridParamsApi(apiRef);
     useGridRows(apiRef, props.rows, props.getRowId);
     useGridEditRows(apiRef);
+    useGridFocus(apiRef);
     useGridKeyboard(rootContainerRef, apiRef);
     useGridKeyboardNavigation(rootContainerRef, apiRef);
     useGridSelection(apiRef);

packages/grid/_modules_/grid/components/GridViewport.tsx

@@ -3,7 +3,10 @@ import { visibleGridColumnsSelector } from '../hooks/features/columns/gridColumn
 import { useGridSelector } from '../hooks/features/core/useGridSelector';
 import { gridDensityRowHeightSelector } from '../hooks/features/density/densitySelector';
 import { visibleSortedGridRowsAsArraySelector } from '../hooks/features/filter/gridFilterSelector';
-import { gridKeyboardCellSelector } from '../hooks/features/keyboard/gridKeyboardSelector';
+import {
+  gridFocusCellSelector,
+  gridTabIndexCellSelector,
+} from '../hooks/features/focus/gridFocusStateSelector';
 import { gridSelectionStateSelector } from '../hooks/features/selection/gridSelectionSelector';
 import { renderStateSelector } from '../hooks/features/virtualization/renderingStateSelector';
 import { optionsSelector } from '../hooks/utils/optionsSelector';
@@ -32,7 +35,8 @@ export const GridViewport: ViewportType = React.forwardRef<HTMLDivElement, {}>(
     const scrollBarState = useGridSelector(apiRef, gridScrollBarSizeSelector);
     const visibleColumns = useGridSelector(apiRef, visibleGridColumnsSelector);
     const renderState = useGridSelector(apiRef, renderStateSelector);
-    const cellFocus = useGridSelector(apiRef, gridKeyboardCellSelector);
+    const cellFocus = useGridSelector(apiRef, gridFocusCellSelector);
+    const cellTabIndex = useGridSelector(apiRef, gridTabIndexCellSelector);
     const selectionState = useGridSelector(apiRef, gridSelectionStateSelector);
     const rows = useGridSelector(apiRef, visibleSortedGridRowsAsArraySelector);
     const rowHeight = useGridSelector(apiRef, gridDensityRowHeightSelector);
@@ -68,6 +72,7 @@ export const GridViewport: ViewportType = React.forwardRef<HTMLDivElement, {}>(
             extendRowFullWidth={!options.disableExtendRowFullWidth}
             rowIndex={renderState.renderContext!.firstRowIdx! + idx}
             cellFocus={cellFocus}
+            cellTabIndex={cellTabIndex}
           />
           <GridEmptyCell width={renderState.renderContext!.rightEmptyWidth} height={rowHeight} />
         </GridRow>

packages/grid/_modules_/grid/components/cell/GridCell.tsx

@@ -36,6 +36,7 @@ export interface GridCellProps {
   width: number;
   cellMode?: GridCellMode;
   children: React.ReactElement | null;
+  tabIndex: 0 | -1;
 }
 
 export const GridCell = React.memo((props: GridCellProps) => {
@@ -53,16 +54,14 @@ export const GridCell = React.memo((props: GridCellProps) => {
     rowIndex,
     rowId,
     showRightBorder,
+    tabIndex,
     value,
     width,
   } = props;
 
   const valueToRender = formattedValue == null ? value : formattedValue;
   const cellRef = React.useRef<HTMLDivElement>(null);
   const apiRef = React.useContext(GridApiContext);
-  const currentFocusedCell = apiRef!.current.getState().keyboard.cell;
-  const isCellFocused =
-    (currentFocusedCell && hasFocus) || (rowIndex === 0 && colIndex === 0 && !currentFocusedCell);
 
   const cssClasses = classnames(
     GRID_CELL_CSS_CLASS,
@@ -89,6 +88,7 @@ export const GridCell = React.memo((props: GridCellProps) => {
     },
     [apiRef, field, rowId],
   );
+
   const publishClick = React.useCallback(
     (eventName: string) => (event: React.MouseEvent) => {
       const params = apiRef!.current.getCellParams(rowId, field || '');
@@ -149,7 +149,12 @@ export const GridCell = React.memo((props: GridCellProps) => {
       cellRef.current &&
       (!document.activeElement || !cellRef.current!.contains(document.activeElement))
     ) {
-      cellRef.current!.focus();
+      const focusableElement = cellRef.current.querySelector('[tabindex="0"]') as HTMLElement;
+      if (focusableElement) {
+        focusableElement!.focus();
+      } else {
+        cellRef.current!.focus();
+      }
     }
   });
 
@@ -165,8 +170,7 @@ export const GridCell = React.memo((props: GridCellProps) => {
       data-mode={cellMode}
       aria-colindex={colIndex}
       style={style}
-      /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
-      tabIndex={isCellFocused ? 0 : -1}
+      tabIndex={tabIndex}
       {...eventsHandlers}
     >
       {children || valueToRender?.toString()}

packages/grid/_modules_/grid/components/cell/GridRowCells.tsx

@@ -34,6 +34,7 @@ interface RowCellsProps {
   rowIndex: number;
   showCellRightBorder: boolean;
   cellFocus: GridCellIndexCoordinates | null;
+  cellTabIndex: GridCellIndexCoordinates | null;
 }
 
 export const GridRowCells = React.memo((props: RowCellsProps) => {
@@ -45,6 +46,7 @@ export const GridRowCells = React.memo((props: RowCellsProps) => {
     lastColIdx,
     rowIndex,
     cellFocus,
+    cellTabIndex,
     showCellRightBorder,
   } = props;
   const apiRef = React.useContext(GridApiContext);
@@ -107,6 +109,12 @@ export const GridRowCells = React.memo((props: RowCellsProps) => {
         cellFocus !== null &&
         cellFocus.rowIndex === rowIndex &&
         cellFocus.colIndex === cellParams.colIndex,
+      tabIndex:
+        cellTabIndex !== null &&
+        cellTabIndex.rowIndex === rowIndex &&
+        cellTabIndex.colIndex === cellParams.colIndex
+          ? 0
+          : -1,
     };
 
     return cellProps;