[data grid] Add default reset value in row edit mode

packages/x-data-grid/src/hooks/features/editing/useGridCellEditing.ts

@@ -39,6 +39,7 @@ import {
   GridCellEditStartReasons,
   GridCellEditStopReasons,
 } from '../../../models/params/gridEditCellParams';
+import { getDefaultCellValue } from './utils';
 
 export const useGridCellEditing = (
   apiRef: React.MutableRefObject<GridPrivateApiCommunity>,
@@ -337,24 +338,7 @@ export const useGridCellEditing = (
 
       let newValue = apiRef.current.getCellValue(id, field);
       if (deleteValue) {
-        const fieldType = apiRef.current.getColumn(field).type;
-        switch (fieldType) {
-          case 'boolean':
-            newValue = false;
-            break;
-          case 'date':
-          case 'dateTime':
-          case 'number':
-            newValue = undefined;
-            break;
-          case 'singleSelect':
-            newValue = null;
-            break;
-          case 'string':
-          default:
-            newValue = '';
-            break;
-        }
+        newValue = getDefaultCellValue(apiRef.current.getColumn(field));
       } else if (initialValue) {
         newValue = initialValue;
       }

packages/x-data-grid/src/hooks/features/editing/useGridRowEditing.ts

@@ -46,6 +46,7 @@ import {
   GridRowEditStartReasons,
 } from '../../../models/params/gridRowParams';
 import { GRID_ACTIONS_COLUMN_TYPE } from '../../../colDef';
+import { getDefaultCellValue } from './utils';
 
 export const useGridRowEditing = (
   apiRef: React.MutableRefObject<GridPrivateApiCommunity>,
@@ -433,7 +434,11 @@ export const useGridRowEditing = (
 
         let newValue = apiRef.current.getCellValue(id, field);
         if (fieldToFocus === field && (deleteValue || initialValue)) {
-          newValue = deleteValue ? '' : initialValue;
+          if (deleteValue) {
+            newValue = getDefaultCellValue(apiRef.current.getColumn(field));
+          } else if (initialValue) {
+            newValue = initialValue;
+          }
         }
 
         acc[field] = {

packages/x-data-grid/src/hooks/features/editing/utils.ts

@@ -0,0 +1,17 @@
+import { GridColDef } from '../../../models/colDef/gridColDef';
+
+export const getDefaultCellValue = (colDef: GridColDef) => {
+  switch (colDef.type) {
+    case 'boolean':
+      return false;
+    case 'date':
+    case 'dateTime':
+    case 'number':
+      return undefined;
+    case 'singleSelect':
+      return null;
+    case 'string':
+    default:
+      return '';
+  }
+};

packages/x-data-grid/src/tests/keyboard.DataGrid.test.tsx

@@ -849,6 +849,7 @@ describe('<DataGrid /> - Keyboard', () => {
     function setupTest(
       rows: Record<string, string | number | Date | boolean>[],
       columns: GridColDef[],
+      editMode: DataGridProps['editMode'],
     ) {
       const valueSetterMock = spy<GridValueSetter<(typeof columns)[number]>>(
         (value, row, column) => {
@@ -862,23 +863,26 @@ describe('<DataGrid /> - Keyboard', () => {
         column.valueSetter = valueSetterMock;
       });
 
-      render(<DataGrid rows={rows} columns={columns} autoHeight />);
+      render(<DataGrid rows={rows} columns={columns} editMode={editMode} autoHeight />);
 
       return { valueSetterMock };
     }
 
-    function testResetValue(
-      keyType: 'Delete' | 'Backspace',
-      field: string,
-      type: GridColType,
-      value: string | number | Date | boolean,
-    ) {
+    type TestResetValueParams = {
+      editMode: DataGridProps['editMode'];
+      keyType: 'Delete' | 'Backspace';
+      field: string;
+      type: GridColType;
+      value: string | number | Date | boolean;
+    };
+
+    function testResetValue({ editMode, keyType, field, type, value }: TestResetValueParams) {
       const columns: GridColDef[] = [
         { field: 'id', editable: true },
         { field, editable: true, type },
       ];
       const rows = [{ id: 1, [field]: value }];
-      const { valueSetterMock } = setupTest(rows, columns);
+      const { valueSetterMock } = setupTest(rows, columns, editMode);
       const cell = getCell(0, 1);
 
       cell.focus();
@@ -890,85 +894,91 @@ describe('<DataGrid /> - Keyboard', () => {
       };
     }
 
-    it(`should reset value on Backspace key press for number type`, () => {
-      const { cell, deletedValue } = testResetValue('Backspace', 'age', 'number', 24);
-      expect(cell).to.equal('');
-      expect(deletedValue).to.equal(undefined);
-    });
-
-    it(`should reset value on Backspace key press for date type`, () => {
-      const { cell, deletedValue } = testResetValue('Backspace', 'birthdate', 'date', new Date());
-      expect(cell).to.equal('');
-      expect(deletedValue).to.equal(undefined);
-    });
-
-    it(`should reset value on Backspace key press for dateTime type`, () => {
-      const { cell, deletedValue } = testResetValue(
-        'Backspace',
-        'appointment',
-        'dateTime',
-        new Date(),
-      );
-      expect(cell).to.equal('');
-      expect(deletedValue).to.equal(undefined);
-    });
-
-    it(`should reset value on Backspace key press for boolean type`, () => {
-      const { cell, deletedValue } = testResetValue('Backspace', 'isVerified', 'boolean', true);
-      expect(cell).to.equal('');
-      expect(deletedValue).to.equal(false);
-    });
-
-    it(`should reset value on Backspace key press for singleSelect type`, () => {
-      const { cell, deletedValue } = testResetValue(
-        'Backspace',
-        'status',
-        'singleSelect',
-        'active',
-      );
-      expect(cell).to.equal('');
-      expect(deletedValue).to.equal(null);
-    });
-
-    it(`should reset value on Delete key press for string type`, () => {
-      const { cell, deletedValue } = testResetValue('Delete', 'name', 'string', 'John Doe');
-      expect(cell).to.equal('');
-      expect(deletedValue).to.equal('');
-    });
-
-    it(`should reset value on Delete key press for number type`, () => {
-      const { cell, deletedValue } = testResetValue('Delete', 'age', 'number', 24);
-      expect(cell).to.equal('');
-      expect(deletedValue).to.equal(undefined);
-    });
-
-    it(`should reset value on Delete key press for date type`, () => {
-      const { cell, deletedValue } = testResetValue('Delete', 'birthdate', 'date', new Date());
-      expect(cell).to.equal('');
-      expect(deletedValue).to.equal(undefined);
-    });
-
-    it(`should reset value on Delete key press for dateTime type`, () => {
-      const { cell, deletedValue } = testResetValue(
-        'Delete',
-        'appointment',
-        'dateTime',
-        new Date(),
-      );
-      expect(cell).to.equal('');
-      expect(deletedValue).to.equal(undefined);
-    });
-
-    it(`should reset value on Delete key press for boolean type`, () => {
-      const { cell, deletedValue } = testResetValue('Delete', 'isVerified', 'boolean', true);
-      expect(cell).to.equal('');
-      expect(deletedValue).to.equal(false);
-    });
+    const testWithEditmodeAndKeytype = ({
+      editMode,
+      keyType,
+    }: Pick<TestResetValueParams, 'editMode' | 'keyType'>) => {
+      describe(`editMode="${editMode}" and ${keyType} key`, () => {
+        const defaultParams: TestResetValueParams = {
+          editMode,
+          keyType,
+          field: 'name',
+          type: 'string',
+          value: 'John Doe',
+        };
+
+        it(`should reset value for string type`, () => {
+          const { cell, deletedValue } = testResetValue({
+            ...defaultParams,
+            keyType: 'Delete',
+            field: 'name',
+            type: 'string',
+            value: 'John Doe',
+          });
+          expect(cell).to.equal('');
+          expect(deletedValue).to.equal('');
+        });
+
+        it(`should reset value for number type`, () => {
+          const { cell, deletedValue } = testResetValue({
+            ...defaultParams,
+            field: 'age',
+            type: 'number',
+            value: 24,
+          });
+          expect(cell).to.equal('');
+          expect(deletedValue).to.equal(undefined);
+        });
+
+        it(`should reset value for date type`, () => {
+          const { cell, deletedValue } = testResetValue({
+            ...defaultParams,
+            field: 'birthdate',
+            type: 'date',
+            value: new Date(),
+          });
+          expect(cell).to.equal('');
+          expect(deletedValue).to.equal(undefined);
+        });
+
+        it(`should reset value dateTime type`, () => {
+          const { cell, deletedValue } = testResetValue({
+            ...defaultParams,
+            field: 'appointment',
+            type: 'dateTime',
+            value: new Date(),
+          });
+          expect(cell).to.equal('');
+          expect(deletedValue).to.equal(undefined);
+        });
+
+        it(`should reset value boolean type`, () => {
+          const { cell, deletedValue } = testResetValue({
+            ...defaultParams,
+            field: 'isVerified',
+            type: 'boolean',
+            value: true,
+          });
+          expect(cell).to.equal('');
+          expect(deletedValue).to.equal(false);
+        });
+
+        it(`should reset value singleSelect type`, () => {
+          const { cell, deletedValue } = testResetValue({
+            ...defaultParams,
+            field: 'status',
+            type: 'singleSelect',
+            value: 'active',
+          });
+          expect(cell).to.equal('');
+          expect(deletedValue).to.equal(null);
+        });
+      });
+    };
 
-    it(`should reset value on Delete key press for singleSelect type`, () => {
-      const { cell, deletedValue } = testResetValue('Delete', 'status', 'singleSelect', 'active');
-      expect(cell).to.equal('');
-      expect(deletedValue).to.equal(null);
-    });
+    testWithEditmodeAndKeytype({ editMode: 'cell', keyType: 'Delete' });
+    testWithEditmodeAndKeytype({ editMode: 'cell', keyType: 'Backspace' });
+    testWithEditmodeAndKeytype({ editMode: 'row', keyType: 'Delete' });
+    testWithEditmodeAndKeytype({ editMode: 'row', keyType: 'Backspace' });
   });
 });