diff --git a/packages/x-data-grid/src/hooks/features/editing/useGridCellEditing.ts b/packages/x-data-grid/src/hooks/features/editing/useGridCellEditing.ts
index 4fb5e5502889c..79f51c6d850b5 100644
--- a/packages/x-data-grid/src/hooks/features/editing/useGridCellEditing.ts
+++ b/packages/x-data-grid/src/hooks/features/editing/useGridCellEditing.ts
@@ -328,8 +328,27 @@ export const useGridCellEditing = (
const { id, field, deleteValue, initialValue } = params;
let newValue = apiRef.current.getCellValue(id, field);
- if (deleteValue || initialValue) {
- newValue = deleteValue ? '' : initialValue;
+ 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;
+ }
+ } else if (initialValue) {
+ newValue = initialValue;
}
const newProps = {
diff --git a/packages/x-data-grid/src/tests/keyboard.DataGrid.test.tsx b/packages/x-data-grid/src/tests/keyboard.DataGrid.test.tsx
index 2f27606d0c3ea..3508850d91a8a 100644
--- a/packages/x-data-grid/src/tests/keyboard.DataGrid.test.tsx
+++ b/packages/x-data-grid/src/tests/keyboard.DataGrid.test.tsx
@@ -10,7 +10,14 @@ import {
getColumnValues,
getRow,
} from 'test/utils/helperFn';
-import { DataGrid, DataGridProps, GridActionsCellItem, GridColDef } from '@mui/x-data-grid';
+import {
+ DataGrid,
+ DataGridProps,
+ GridActionsCellItem,
+ GridColDef,
+ GridColType,
+ GridValueSetter,
+} from '@mui/x-data-grid';
import { useBasicDemoData, getBasicGridData } from '@mui/x-data-grid-generator';
import RestoreIcon from '@mui/icons-material/Restore';
@@ -836,4 +843,131 @@ describe(' - Keyboard', () => {
act(() => cell.focus());
fireEvent.keyDown(cell, { key: 'ArrowDown' });
});
+
+ describe('After pressing the backspace/delete key, the reset value type should match the column type', () => {
+ function setupTest(
+ rows: Record[],
+ columns: GridColDef[],
+ ) {
+ const valueSetterMock = spy>(
+ (value, row, column) => {
+ return {
+ ...row,
+ [column.field]: value,
+ };
+ },
+ );
+ columns.forEach((column) => {
+ column.valueSetter = valueSetterMock;
+ });
+
+ render();
+
+ return { valueSetterMock };
+ }
+
+ function testResetValue(
+ keyType: 'Delete' | 'Backspace',
+ field: string,
+ type: GridColType,
+ value: string | number | Date | boolean,
+ ) {
+ const columns: GridColDef[] = [
+ { field: 'id', editable: true },
+ { field, editable: true, type },
+ ];
+ const rows = [{ id: 1, [field]: value }];
+ const { valueSetterMock } = setupTest(rows, columns);
+ const cell = getCell(0, 1);
+
+ cell.focus();
+ fireEvent.keyDown(cell, { key: keyType });
+
+ return {
+ cell: cell.textContent,
+ deletedValue: valueSetterMock.lastCall.args[0],
+ };
+ }
+
+ 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);
+ });
+
+ 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);
+ });
+ });
});