[DataGrid] Toggling the checkbox using space exits edit mode

[adharshmk96]

Order ID 💳

45398

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

The problem in depth 🔍

I have a problem with checkbox in row edit mode.

In the example here, https://codesandbox.io/s/updaterowsapiref-demo-mui-x-forked-buy7rq?file=/demo.tsx

current behaviour
If I highlight a cell in age column, press enter ( to enter edit mode ), press tab ( to reach checkbox ), pressing space or enter to change the checkbox value is exiting the edit mode

expected behaviour
pressing space to change the checkbox value should not exit the row edit mode

how can I achieve this

PS: if you highlight checkbox and press enter to enter the edit mode, you can toggle using space without exiting edit mode.

Your environment 🌎

`npx @mui/envinfo`

  System:
    OS: Windows 10 10.0.19044
  Binaries:
    Node: 14.20.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.18 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.17 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.19041.1266.0), Chromium (104.0.1293.70)
  npmPackages:
    @emotion/react: ^11.9.0 => 11.9.0
    @emotion/styled: ^11.8.1 => 11.8.1
    @mui/base:  5.0.0-alpha.79
    @mui/icons-material: ^5.6.2 => 5.6.2
    @mui/lab: ^5.0.0-alpha.80 => 5.0.0-alpha.80
    @mui/material: ^5.6.4 => 5.6.4
    @mui/private-theming:  5.6.2
    @mui/styled-engine:  5.6.1
    @mui/system:  5.6.4
    @mui/types:  7.1.3
    @mui/utils:  5.6.1
    @mui/x-data-grid:  5.12.1
    @mui/x-data-grid-pro: ^5.12.1 => 5.12.1
    @mui/x-date-pickers:  5.0.0-alpha.0
    @mui/x-license-pro:  5.12.1
    @types/react: ^18.0.2 => 18.0.2
    react: ^18.0.0 => 18.0.0
    react-dom: ^18.0.0 => 18.0.0
    typescript: ~4.5.4 => 4.5.5

[DanailH]

Hey @adharshmk96, thanks for raising this!
I'm able to reproduce the issue, it looks like it is a bug.

[m4theushw]

This happens because the checkbox also fires a click event when pressing Space. This click event is read as if the user has clicked outside the row and wants to end the edit mode. One solution is to do nothing when the click event is not preceded by a mousedown, not fired by the checkbox.

diff --git a/packages/grid/x-data-grid/src/hooks/features/focus/useGridFocus.ts b/packages/grid/x-data-grid/src/hooks/features/focus/useGridFocus.ts
index b37f7e1cc..8b697e802 100644
--- a/packages/grid/x-data-grid/src/hooks/features/focus/useGridFocus.ts
+++ b/packages/grid/x-data-grid/src/hooks/features/focus/useGridFocus.ts
@@ -33,6 +33,7 @@ export const useGridFocus = (
   const logger = useGridLogger(apiRef, 'useGridFocus');
 
   const lastClickedCell = React.useRef<GridCellParams | null>(null);
+  const ignoreClickEvent = React.useRef<boolean>(true);
 
   const setCellFocus = React.useCallback<GridFocusApi['setCellFocus']>(
     (id, field) => {
@@ -184,8 +185,17 @@ export const useGridFocus = (
     lastClickedCell.current = params;
   }, []);
 
+  const handleDocumentMouseDown = React.useCallback(() => {
+    ignoreClickEvent.current = false;
+  }, []);
+
   const handleDocumentClick = React.useCallback(
     (event: MouseEvent) => {
+      if (ignoreClickEvent.current) {
+        return;
+      }
+      ignoreClickEvent.current = true;
+
       const cellParams = lastClickedCell.current;
       lastClickedCell.current = null;
 
@@ -271,11 +281,13 @@ export const useGridFocus = (
   React.useEffect(() => {
     const doc = ownerDocument(apiRef.current.rootElementRef!.current);
     doc.addEventListener('click', handleDocumentClick);
+    doc.addEventListener('mousedown', handleDocumentMouseDown);
 
     return () => {
       doc.removeEventListener('click', handleDocumentClick);
+      doc.removeEventListener('mousedown', handleDocumentMouseDown);
     };
-  }, [apiRef, handleDocumentClick]);
+  }, [apiRef, handleDocumentClick, handleDocumentMouseDown]);
 
   useGridApiEventHandler(apiRef, 'columnHeaderBlur', handleBlur);
   useGridApiEventHandler(apiRef, 'cellDoubleClick', handleCellDoubleClick);

[yaredtsy]

@m4theushw I have figured it out the problem is Tab key is not updating the current.state.focus so when you click on the age cell at first then hint Tab and focus on the checkbox, current.state.focus returns the first focused cell.

 const handleCellKeyDown = React.useCallback<GridEventListener<'cellKeyDown'>>(
    (params, event) => {
      // GRID_CELL_NAVIGATION_KEY_DOWN handles the focus on Enter, Tab and navigation keys
      if (event.key === 'Enter' || event.key === 'Tab' || isNavigationKey(event.key)) {
        return;
      }
      apiRef.current.setCellFocus(params.id, params.field);
    },
    [apiRef],
  );

Enter and Tab are not changing the focus.

[yaredtsy]

useGridKeyboardNavigation neglect key changes if the cell is in edit mode.

const handleCellKeyDown = React.useCallback<GridEventListener<'cellKeyDown'>>(
    (params, event) => {

      if (cellParams.cellMode !== GridCellModes.Edit && isNavigationKey(event.key)) {
        apiRef.current.publishEvent('cellNavigationKeyDown', cellParams, event);
      }
    },
    [apiRef],
  );

[michelengelen]

Issue is no longer reproducable on latest version. 💪🏼

[github-actions]

⚠️ This issue has been closed.
If you have a similar problem, please open a new issue and provide details about your specific problem.
If you can provide additional information related to this topic that could help future readers, please feel free to leave a comment.

How did we do @adharshmk96?
Your experience with our support team matters to us. If you have a moment, please share your thoughts through our brief survey.