[DataGrid] Remove unnecessary keyboard navigation events

mui · Nov 15, 2022 · e423296 · e423296
1 parent 4d77507
commit e423296
Show file tree

Hide file tree

Showing 11 changed files with 143 additions and 233 deletions.
diff --git a/docs/data/data-grid/tree-data/TreeDataCustomGroupingColumn.js b/docs/data/data-grid/tree-data/TreeDataCustomGroupingColumn.js
@@ -25,15 +25,6 @@ function CustomGridTreeDataGroupingCell(props) {
 
   const filteredDescendantCount = filteredDescendantCountLookup[rowNode.id] ?? 0;
 
-  const handleKeyDown = (event) => {
-    if (event.key === ' ') {
-      event.stopPropagation();
-    }
-    if (isNavigationKey(event.key) && !event.shiftKey) {
-      apiRef.current.publishEvent('cellNavigationKeyDown', props, event);
-    }
-  };
-
   const handleClick = (event) => {
     if (rowNode.type !== 'group') {
       return;
@@ -48,12 +39,7 @@ function CustomGridTreeDataGroupingCell(props) {
     <Box sx={{ ml: rowNode.depth * 4 }}>
       <div>
         {filteredDescendantCount > 0 ? (
-          <Button
-            onClick={handleClick}
-            onKeyDown={handleKeyDown}
-            tabIndex={-1}
-            size="small"
-          >
+          <Button onClick={handleClick} tabIndex={-1} size="small">
             See {filteredDescendantCount} employees
           </Button>
         ) : (

diff --git a/docs/data/data-grid/tree-data/TreeDataCustomGroupingColumn.tsx b/docs/data/data-grid/tree-data/TreeDataCustomGroupingColumn.tsx
@@ -29,15 +29,6 @@ function CustomGridTreeDataGroupingCell(props: GridRenderCellParams) {
   );
   const filteredDescendantCount = filteredDescendantCountLookup[rowNode.id] ?? 0;
 
-  const handleKeyDown: ButtonProps['onKeyDown'] = (event) => {
-    if (event.key === ' ') {
-      event.stopPropagation();
-    }
-    if (isNavigationKey(event.key) && !event.shiftKey) {
-      apiRef.current.publishEvent('cellNavigationKeyDown', props, event);
-    }
-  };
-
   const handleClick: ButtonProps['onClick'] = (event) => {
     if (rowNode.type !== 'group') {
       return;
@@ -52,12 +43,7 @@ function CustomGridTreeDataGroupingCell(props: GridRenderCellParams) {
     <Box sx={{ ml: rowNode.depth * 4 }}>
       <div>
         {filteredDescendantCount > 0 ? (
-          <Button
-            onClick={handleClick}
-            onKeyDown={handleKeyDown}
-            tabIndex={-1}
-            size="small"
-          >
+          <Button onClick={handleClick} tabIndex={-1} size="small">
             See {filteredDescendantCount} employees
           </Button>
         ) : (

diff --git a/docs/data/data-grid/tree-data/TreeDataLazyLoading.js b/docs/data/data-grid/tree-data/TreeDataLazyLoading.js
@@ -173,15 +173,6 @@ function GroupingCellWithLazyLoading(props) {
     ? rootProps.components.TreeDataCollapseIcon
     : rootProps.components.TreeDataExpandIcon;
 
-  const handleKeyDown = (event) => {
-    if (event.key === ' ') {
-      event.stopPropagation();
-    }
-    if (isNavigationKey(event.key) && !event.shiftKey) {
-      apiRef.current.publishEvent('cellNavigationKeyDown', props, event);
-    }
-  };
-
   const handleClick = (event) => {
     apiRef.current.setRowChildrenExpansion(id, !rowNode.childrenExpanded);
     apiRef.current.setCellFocus(id, field);
@@ -195,7 +186,6 @@ function GroupingCellWithLazyLoading(props) {
           <IconButton
             size="small"
             onClick={handleClick}
-            onKeyDown={handleKeyDown}
             tabIndex={-1}
             aria-label={
               rowNode.childrenExpanded

diff --git a/docs/data/data-grid/tree-data/TreeDataLazyLoading.tsx b/docs/data/data-grid/tree-data/TreeDataLazyLoading.tsx
@@ -193,15 +193,6 @@ function GroupingCellWithLazyLoading(props: GroupingCellWithLazyLoadingProps) {
     ? rootProps.components.TreeDataCollapseIcon
     : rootProps.components.TreeDataExpandIcon;
 
-  const handleKeyDown: IconButtonProps['onKeyDown'] = (event) => {
-    if (event.key === ' ') {
-      event.stopPropagation();
-    }
-    if (isNavigationKey(event.key) && !event.shiftKey) {
-      apiRef.current.publishEvent('cellNavigationKeyDown', props, event);
-    }
-  };
-
   const handleClick: IconButtonProps['onClick'] = (event) => {
     apiRef.current.setRowChildrenExpansion(id, !rowNode.childrenExpanded);
     apiRef.current.setCellFocus(id, field);
@@ -215,7 +206,6 @@ function GroupingCellWithLazyLoading(props: GroupingCellWithLazyLoadingProps) {
           <IconButton
             size="small"
             onClick={handleClick}
-            onKeyDown={handleKeyDown}
             tabIndex={-1}
             aria-label={
               rowNode.childrenExpanded

diff --git a/docs/data/migration/migration-data-grid-v5/migration-data-grid-v5.md b/docs/data/migration/migration-data-grid-v5/migration-data-grid-v5.md
@@ -54,6 +54,8 @@ Below are described the steps you need to make to migrate from v5 to v6.
 
 - The `selectionChange` event was renamed to `rowSelectionChange`.
 - The `columnVisibilityChange` event was removed. Use `columnVisibilityModelChange` instead.
+- The `cellNavigationKeyDown` event was removed. Use `cellKeyDown` and check the key provided in the event argument.
+- The `columnHeaderNavigationKeyDown` event was removed. Use `columnHeaderKeyDown` and check the key provided in the event argument.
 - The `GridCallbackDetails['api']` was removed from event details. Use the `apiRef` returned by `useGridApiContext` or `useGridApiRef` instead.
 
 ### Columns

diff --git a/packages/grid/x-data-grid-premium/src/components/GridGroupingCriteriaCell.tsx b/packages/grid/x-data-grid-premium/src/components/GridGroupingCriteriaCell.tsx
@@ -49,6 +49,8 @@ export function GridGroupingCriteriaCell(props: GridGroupingCriteriaCellProps) {
 
   const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {
     if (event.key === ' ') {
+      // We call event.stopPropagation to avoid unfolding the row and also scrolling to bottom
+      // TODO: Remove and add a check inside useGridKeyboardNavigation
       event.stopPropagation();
     }
     apiRef.current.publishEvent('cellKeyDown', props, event);

diff --git a/packages/grid/x-data-grid-pro/src/components/GridTreeDataGroupingCell.tsx b/packages/grid/x-data-grid-pro/src/components/GridTreeDataGroupingCell.tsx
@@ -10,7 +10,6 @@ import {
   GridRenderCellParams,
   GridGroupNode,
 } from '@mui/x-data-grid';
-import { isNavigationKey } from '@mui/x-data-grid/internals';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { DataGridProProcessedProps } from '../models/dataGridProProps';
@@ -55,15 +54,6 @@ function GridTreeDataGroupingCell(props: GridTreeDataGroupingCellProps) {
     ? rootProps.components.TreeDataCollapseIcon
     : rootProps.components.TreeDataExpandIcon;
 
-  const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {
-    if (event.key === ' ') {
-      event.stopPropagation();
-    }
-    if (isNavigationKey(event.key) && !event.shiftKey) {
-      apiRef.current.publishEvent('cellNavigationKeyDown', props, event);
-    }
-  };
-
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     apiRef.current.setRowChildrenExpansion(id, !rowNode.childrenExpanded);
     apiRef.current.setCellFocus(id, field);
@@ -77,7 +67,6 @@ function GridTreeDataGroupingCell(props: GridTreeDataGroupingCellProps) {
           <IconButton
             size="small"
             onClick={handleClick}
-            onKeyDown={handleKeyDown}
             tabIndex={-1}
             aria-label={
               rowNode.childrenExpanded

diff --git a/packages/grid/x-data-grid/src/components/columnSelection/GridCellCheckboxRenderer.tsx b/packages/grid/x-data-grid/src/components/columnSelection/GridCellCheckboxRenderer.tsx
@@ -5,7 +5,7 @@ import {
   unstable_useForkRef as useForkRef,
 } from '@mui/utils';
 import { GridRenderCellParams } from '../../models/params/gridCellParams';
-import { isNavigationKey, isSpaceKey } from '../../utils/keyboardUtils';
+import { isSpaceKey } from '../../utils/keyboardUtils';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
@@ -76,17 +76,13 @@ const GridCellCheckboxForwardRef = React.forwardRef<HTMLInputElement, GridRender
       }
     }, [hasFocus]);
 
-    const handleKeyDown = React.useCallback(
-      (event: React.KeyboardEvent<HTMLInputElement>) => {
-        if (isSpaceKey(event.key)) {
-          event.stopPropagation();
-        }
-        if (isNavigationKey(event.key) && !event.shiftKey) {
-          apiRef.current.publishEvent('cellNavigationKeyDown', props, event);
-        }
-      },
-      [apiRef, props],
-    );
+    const handleKeyDown = React.useCallback((event: React.KeyboardEvent<HTMLInputElement>) => {
+      if (isSpaceKey(event.key)) {
+        // We call event.stopPropagation to avoid selecting the row and also scrolling to bottom
+        // TODO: Remove and add a check inside useGridKeyboardNavigation
+        event.stopPropagation();
+      }
+    }, []);
 
     if (rowNode.type === 'footer' || rowNode.type === 'pinnedRow') {
       return null;

diff --git a/packages/grid/x-data-grid/src/components/columnSelection/GridHeaderCheckbox.tsx b/packages/grid/x-data-grid/src/components/columnSelection/GridHeaderCheckbox.tsx
@@ -5,7 +5,6 @@ import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { gridTabIndexColumnHeaderSelector } from '../../hooks/features/focus/gridFocusStateSelector';
 import { gridRowSelectionStateSelector } from '../../hooks/features/rowSelection/gridRowSelectionSelector';
 import { GridColumnHeaderParams } from '../../models/params/gridColumnHeaderParams';
-import { isNavigationKey } from '../../utils/keyboardUtils';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
@@ -113,12 +112,8 @@ const GridHeaderCheckbox = React.forwardRef<HTMLInputElement, GridColumnHeaderPa
             value: !isChecked,
           });
         }
-        // TODO v6 remove columnHeaderNavigationKeyDown events which are not used internally anymore
-        if (isNavigationKey(event.key) && !event.shiftKey) {
-          apiRef.current.publishEvent('columnHeaderNavigationKeyDown', props, event);
-        }
       },
-      [apiRef, props, isChecked],
+      [apiRef, isChecked],
     );
 
     const handleSelectionChange = React.useCallback(() => {