[DataGrid] Ignore preProcessEditCellProps for non-editable columns when starting a row update (#17732)

Author: arminmeh

packages/x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx

@@ -987,6 +987,24 @@ describe('<DataGridPro /> - Row editing', () => {
         expect(listener.callCount).to.equal(0);
       });
 
+      it('should call preProcessEditCellProps for editable columns only', async () => {
+        const preProcessEditCellProps1 = spy(({ props }: GridPreProcessEditCellProps) => props);
+        const preProcessEditCellProps2 = spy(({ props }: GridPreProcessEditCellProps) => props);
+        const { user } = render(
+          <TestCase
+            column1Props={{ preProcessEditCellProps: preProcessEditCellProps1 }}
+            column2Props={{ preProcessEditCellProps: preProcessEditCellProps2, editable: false }}
+          />,
+        );
+
+        const cell = getCell(0, 1);
+        await user.click(cell);
+        await user.keyboard('a');
+
+        expect(preProcessEditCellProps1.callCount).to.equal(1);
+        expect(preProcessEditCellProps2.callCount).to.equal(0);
+      });
+
       ['ctrlKey', 'metaKey'].forEach((key) => {
         it(`should not publish 'rowEditStart' if ${key} is pressed`, () => {
           render(<TestCase />);

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

@@ -30,7 +30,7 @@ import { gridEditRowsStateSelector, gridRowIsEditingSelector } from './gridEditi
 import { GridRowId, GridValidRowModel } from '../../../models/gridRows';
 import { isPrintableKey, isPasteShortcut } from '../../../utils/keyboardUtils';
 import {
-  gridColumnFieldsSelector,
+  gridColumnDefinitionsSelector,
   gridVisibleColumnFieldsSelector,
 } from '../columns/gridColumnsSelector';
 import { GridCellParams } from '../../../models/params/gridCellParams';
@@ -422,9 +422,10 @@ export const useGridRowEditing = (
       const { id, fieldToFocus, deleteValue, initialValue } = params;
 
       const row = apiRef.current.getRow(id);
-      const columnFields = gridColumnFieldsSelector(apiRef);
+      const columns = gridColumnDefinitionsSelector(apiRef);
 
-      const newProps = columnFields.reduce<Record<string, GridEditCellProps>>((acc, field) => {
+      const newProps = columns.reduce<Record<string, GridEditCellProps>>((acc, col) => {
+        const field = col.field;
         const cellParams = apiRef.current.getCellParams(id, field);
         if (!cellParams.isEditable) {
           return acc;
@@ -443,7 +444,7 @@ export const useGridRowEditing = (
         acc[field] = {
           value: newValue,
           error: false,
-          isProcessingProps: !!column.preProcessEditCellProps && deleteValue,
+          isProcessingProps: column.editable && !!column.preProcessEditCellProps && deleteValue,
         };
 
         return acc;
@@ -456,10 +457,10 @@ export const useGridRowEditing = (
         apiRef.current.setCellFocus(id, fieldToFocus);
       }
 
-      columnFields
-        .filter((field) => !!apiRef.current.getColumn(field).preProcessEditCellProps && deleteValue)
-        .forEach((field) => {
-          const column = apiRef.current.getColumn(field);
+      columns
+        .filter((column) => column.editable && !!column.preProcessEditCellProps && deleteValue)
+        .forEach((column) => {
+          const field = column.field;
           const value = apiRef.current.getCellValue(id, field);
           const newValue = deleteValue ? getDefaultCellValue(column) : (initialValue ?? value);