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); + }); + }); });