[DataGrid] Preprocess edit cell props on backspace/delete (@KenanYusuf)…

… (#15223) Co-authored-by: Kenan Yusuf <[email protected]>
mui · Nov 1, 2024 · 2edea60 · 2edea60
1 parent e81fe1b
commit 2edea60
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 9 deletions.
diff --git a/packages/x-data-grid-pro/src/tests/cellEditing.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/cellEditing.DataGridPro.test.tsx
@@ -13,7 +13,7 @@ import {
   GridCellModes,
 } from '@mui/x-data-grid-pro';
 import { getBasicGridData } from '@mui/x-data-grid-generator';
-import { createRenderer, fireEvent, act } from '@mui/internal-test-utils';
+import { createRenderer, fireEvent, act, waitFor } from '@mui/internal-test-utils';
 import { getCell, spyApi } from 'test/utils/helperFn';
 import { fireUserEvent } from 'test/utils/fireUserEvent';
 
@@ -896,6 +896,25 @@ describe('<DataGridPro /> - Cell editing', () => {
           deleteValue: true,
         });
       });
+
+      it('should call preProcessEditCellProps', async () => {
+        const preProcessEditCellProps = spy(({ props }: GridPreProcessEditCellProps) => props);
+        render(<TestCase columnProps={{ preProcessEditCellProps }} />);
+
+        const cell = getCell(0, 1);
+        fireUserEvent.mousePress(cell);
+        fireEvent.keyDown(cell, { key: 'Delete' });
+
+        await waitFor(() => {
+          expect(preProcessEditCellProps.callCount).to.equal(1);
+        });
+
+        expect(preProcessEditCellProps.lastCall.args[0].props).to.deep.equal({
+          value: '',
+          error: false,
+          isProcessingProps: true,
+        });
+      });
     });
 
     describe('by pressing a printable character', () => {

diff --git a/packages/x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx
@@ -13,7 +13,7 @@ import {
 } from '@mui/x-data-grid-pro';
 import Portal from '@mui/material/Portal';
 import { getBasicGridData } from '@mui/x-data-grid-generator';
-import { createRenderer, fireEvent, act, screen } from '@mui/internal-test-utils';
+import { createRenderer, fireEvent, act, screen, waitFor } from '@mui/internal-test-utils';
 import { getCell, getRow, spyApi } from 'test/utils/helperFn';
 import { fireUserEvent } from 'test/utils/fireUserEvent';
 
@@ -906,6 +906,25 @@ describe('<DataGridPro /> - Row editing', () => {
           deleteValue: true,
         });
       });
+
+      it('should call preProcessEditCellProps', async () => {
+        const preProcessEditCellProps = spy(({ props }: GridPreProcessEditCellProps) => props);
+        render(<TestCase column1Props={{ preProcessEditCellProps }} />);
+
+        const cell = getCell(0, 1);
+        fireUserEvent.mousePress(cell);
+        fireEvent.keyDown(cell, { key: 'Delete' });
+
+        await waitFor(() => {
+          expect(preProcessEditCellProps.callCount).to.equal(1);
+        });
+
+        expect(preProcessEditCellProps.lastCall.args[0].props).to.deep.equal({
+          value: '',
+          error: false,
+          isProcessingProps: true,
+        });
+      });
     });
 
     describe('by pressing a printable character', () => {

diff --git a/packages/x-data-grid/src/hooks/features/editing/useGridCellEditing.ts b/packages/x-data-grid/src/hooks/features/editing/useGridCellEditing.ts
@@ -333,25 +333,49 @@ export const useGridCellEditing = (
   );
 
   const updateStateToStartCellEditMode = useEventCallback<[GridStartCellEditModeParams], void>(
-    (params) => {
+    async (params) => {
       const { id, field, deleteValue, initialValue } = params;
 
-      let newValue = apiRef.current.getCellValue(id, field);
+      const value = apiRef.current.getCellValue(id, field);
+      let newValue = value;
       if (deleteValue) {
         newValue = getDefaultCellValue(apiRef.current.getColumn(field));
       } else if (initialValue) {
         newValue = initialValue;
       }
 
-      const newProps = {
+      const column = apiRef.current.getColumn(field);
+      const shouldProcessEditCellProps = !!column.preProcessEditCellProps && deleteValue;
+
+      let newProps: GridEditCellProps = {
         value: newValue,
         error: false,
-        isProcessingProps: false,
+        isProcessingProps: shouldProcessEditCellProps,
       };
 
       updateOrDeleteFieldState(id, field, newProps);
 
       apiRef.current.setCellFocus(id, field);
+
+      if (shouldProcessEditCellProps) {
+        newProps = await Promise.resolve(
+          column.preProcessEditCellProps!({
+            id,
+            row: apiRef.current.getRow(id),
+            props: newProps,
+            hasChanged: newValue !== value,
+          }),
+        );
+        // Check if still in edit mode before updating
+        if (apiRef.current.getCellMode(id, field) === GridCellModes.Edit) {
+          const editingState = gridEditRowsStateSelector(apiRef.current.state);
+          updateOrDeleteFieldState(id, field, {
+            ...newProps,
+            value: editingState[id][field].value,
+            isProcessingProps: false,
+          });
+        }
+      }
     },
   ) as GridCellEditingApi['startCellEditMode'];
 

diff --git a/packages/x-data-grid/src/hooks/features/editing/useGridRowEditing.ts b/packages/x-data-grid/src/hooks/features/editing/useGridRowEditing.ts
@@ -432,10 +432,11 @@ export const useGridRowEditing = (
           return acc;
         }
 
+        const column = apiRef.current.getColumn(field);
         let newValue = apiRef.current.getCellValue(id, field);
         if (fieldToFocus === field && (deleteValue || initialValue)) {
           if (deleteValue) {
-            newValue = getDefaultCellValue(apiRef.current.getColumn(field));
+            newValue = getDefaultCellValue(column);
           } else if (initialValue) {
             newValue = initialValue;
           }
@@ -444,7 +445,7 @@ export const useGridRowEditing = (
         acc[field] = {
           value: newValue,
           error: false,
-          isProcessingProps: false,
+          isProcessingProps: !!column.preProcessEditCellProps && deleteValue,
         };
 
         return acc;
@@ -455,8 +456,35 @@ export const useGridRowEditing = (
       if (fieldToFocus) {
         apiRef.current.setCellFocus(id, fieldToFocus);
       }
+
+      columnFields
+        .filter((field) => !!apiRef.current.getColumn(field).preProcessEditCellProps && deleteValue)
+        .forEach((field) => {
+          const column = apiRef.current.getColumn(field);
+          const value = apiRef.current.getCellValue(id, field);
+          const newValue = deleteValue ? getDefaultCellValue(column) : (initialValue ?? value);
+
+          Promise.resolve(
+            column.preProcessEditCellProps!({
+              id,
+              row: apiRef.current.getRow(id),
+              props: newProps[field],
+              hasChanged: newValue !== value,
+            }),
+          ).then((processedProps) => {
+            // Check if still in edit mode before updating
+            if (apiRef.current.getRowMode(id) === GridRowModes.Edit) {
+              const editingState = gridEditRowsStateSelector(apiRef.current.state);
+              updateOrDeleteFieldState(id, field, {
+                ...processedProps,
+                value: editingState[id][field].value,
+                isProcessingProps: false,
+              });
+            }
+          });
+        });
     },
-  ) as GridRowEditingApi['stopRowEditMode'];
+  ) as GridRowEditingApi['startRowEditMode'];
 
   const stopRowEditMode = React.useCallback<GridRowEditingApi['stopRowEditMode']>(
     (params) => {