[DataGrid] Don't start edit mode when pressing Shift + Space (#6228)

mui · Oct 4, 2022 · 17e695f · 17e695f
1 parent 7998b9d
commit 17e695f
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 33 deletions.
diff --git a/packages/grid/x-data-grid/src/hooks/features/editRows/useGridCellEditing.new.ts b/packages/grid/x-data-grid/src/hooks/features/editRows/useGridCellEditing.new.ts
@@ -158,6 +158,10 @@ export const useGridCellEditing = (
       } else if (params.isEditable) {
         let reason: GridCellEditStartReasons | undefined;
 
+        if (event.key === ' ' && event.shiftKey) {
+          return; // Shift + Space is used to select the row
+        }
+
         if (isPrintableKey(event)) {
           reason = GridCellEditStartReasons.printableKeyDown;
         } else if ((event.ctrlKey || event.metaKey) && event.key === 'v') {

diff --git a/packages/grid/x-data-grid/src/hooks/features/editRows/useGridRowEditing.new.ts b/packages/grid/x-data-grid/src/hooks/features/editRows/useGridRowEditing.new.ts
@@ -220,6 +220,10 @@ export const useGridRowEditing = (
       } else if (params.isEditable) {
         let reason: GridRowEditStartReasons | undefined;
 
+        if (event.key === ' ' && event.shiftKey) {
+          return; // Shift + Space is used to select the row
+        }
+
         if (isPrintableKey(event)) {
           reason = GridRowEditStartReasons.printableKeyDown;
         } else if ((event.ctrlKey || event.metaKey) && event.key === 'v') {

diff --git a/packages/grid/x-data-grid/src/tests/selection.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/selection.DataGrid.test.tsx
@@ -3,7 +3,13 @@ import { expect } from 'chai';
 import { spy } from 'sinon';
 // @ts-expect-error Remove once the test utils are typed
 import { createRenderer, fireEvent, screen, act, userEvent } from '@mui/monorepo/test/utils';
-import { DataGrid, DataGridProps, GridInputSelectionModel, GridRowId } from '@mui/x-data-grid';
+import {
+  DataGrid,
+  DataGridProps,
+  GridInputSelectionModel,
+  GridRowId,
+  GridEditModes,
+} from '@mui/x-data-grid';
 import {
   getCell,
   getRow,
@@ -32,16 +38,13 @@ describe('<DataGrid /> - Selection', () => {
 
   const defaultData = getBasicGridData(4, 2);
 
-  const TestDataGridSelection = (
-    props: Omit<DataGridProps, 'rows' | 'columns'> &
-      Partial<Pick<DataGridProps, 'rows' | 'columns'>>,
-  ) => (
+  const TestDataGridSelection = (props: Partial<DataGridProps>) => (
     <div style={{ width: 300, height: 300 }}>
       <DataGrid
         {...defaultData}
         {...props}
         autoHeight={isJSDOM}
-        experimentalFeatures={{ warnIfFocusStateIsNotSynced: true }}
+        experimentalFeatures={{ warnIfFocusStateIsNotSynced: true, ...props.experimentalFeatures }}
       />
     </div>
   );
@@ -105,38 +108,42 @@ describe('<DataGrid /> - Selection', () => {
       expect(getSelectedRowIds()).to.deep.equal([1]);
     });
 
-    it('should select row on Shift + Space without starting editing the cell', () => {
-      const onCellEditStart = spy();
-      render(
-        <TestDataGridSelection
-          columns={[
-            { field: 'id', type: 'number' },
-            { field: 'name', editable: true },
-          ]}
-          rows={[
-            { id: 0, name: 'React' },
-            { id: 1, name: 'Vue' },
-          ]}
-          onCellEditStart={onCellEditStart}
-          disableSelectionOnClick
-        />,
-      );
-      expect(onCellEditStart.callCount).to.equal(0);
+    [GridEditModes.Cell, GridEditModes.Row].forEach((editMode) => {
+      it(`should select row on Shift + Space without starting editing the ${editMode}`, () => {
+        const onCellEditStart = spy();
+        render(
+          <TestDataGridSelection
+            columns={[
+              { field: 'id', type: 'number' },
+              { field: 'name', editable: true },
+            ]}
+            rows={[
+              { id: 0, name: 'React' },
+              { id: 1, name: 'Vue' },
+            ]}
+            onCellEditStart={onCellEditStart}
+            experimentalFeatures={{ newEditingApi: true }}
+            editMode={editMode}
+            disableSelectionOnClick
+          />,
+        );
+        expect(onCellEditStart.callCount).to.equal(0);
 
-      const cell01 = getCell(0, 1);
-      userEvent.mousePress(cell01);
+        const cell01 = getCell(0, 1);
+        userEvent.mousePress(cell01);
 
-      fireEvent.keyDown(cell01, { key: ' ', shiftKey: true });
+        fireEvent.keyDown(cell01, { key: ' ', shiftKey: true });
 
-      expect(onCellEditStart.callCount).to.equal(0);
-      expect(getSelectedRowIds()).to.deep.equal([0]);
+        expect(onCellEditStart.callCount).to.equal(0);
+        expect(getSelectedRowIds()).to.deep.equal([0]);
 
-      const cell11 = getCell(1, 1);
-      userEvent.mousePress(cell11);
-      fireEvent.keyDown(cell11, { key: ' ', shiftKey: true });
+        const cell11 = getCell(1, 1);
+        userEvent.mousePress(cell11);
+        fireEvent.keyDown(cell11, { key: ' ', shiftKey: true });
 
-      expect(onCellEditStart.callCount).to.equal(0);
-      expect(getSelectedRowIds()).to.deep.equal([1]);
+        expect(onCellEditStart.callCount).to.equal(0);
+        expect(getSelectedRowIds()).to.deep.equal([1]);
+      });
     });
 
     it(`should deselect the selected row on Shift + Space`, () => {