[DataGrid] Fix calling onCellEditStop on error

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

@@ -190,6 +190,33 @@ describe('<DataGridPro /> - Cell editing', () => {
         });
       });
 
+      it('should not call onCellEditStop if preProcessEditCellProps returns error', async () => {
+        columnProps.preProcessEditCellProps = spy(({ props }: GridPreProcessEditCellProps) => ({
+          ...props,
+          error: true,
+        }));
+
+        const handleEditCellStop = spy();
+
+        render(<TestCase onCellEditStop={handleEditCellStop} />);
+        act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' }));
+        await act(() =>
+          apiRef.current.setEditCellValue({
+            id: 0,
+            field: 'currencyPair',
+            value: 'USD GBP',
+          }),
+        );
+        const cell = getCell(0, 1);
+        cell.focus();
+
+        await act(() => {
+          fireEvent.keyDown(cell, { key: 'Enter' });
+        });
+
+        expect(handleEditCellStop.callCount).to.equal(0);
+      });
+
       it('should pass to renderEditCell the props returned by preProcessEditCellProps', async () => {
         columnProps.preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) => ({
           ...props,

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

@@ -234,6 +234,42 @@ export const useGridCellEditing = (
     [apiRef],
   );
 
+  const runIfNoPreProcessError =
+    <Args extends any[]>(callback?: (...args: Args) => void) =>
+    async (...args: Args) => {
+      if (callback) {
+        const { field, id, value, debounceMs, unstable_skipValueParser: skipValueParser } = args[0];
+        const column = apiRef.current.getColumn(field);
+        const row = apiRef.current.getRow(id)!;
+
+        let parsedValue = value;
+        if (column.valueParser && !skipValueParser) {
+          parsedValue = column.valueParser(value, row, column, apiRef);
+        }
+
+        const editingState = gridEditRowsStateSelector(apiRef.current.state);
+        let newProps: GridEditCellProps = {
+          ...editingState[id][field],
+          value: parsedValue,
+          changeReason: debounceMs ? 'debouncedSetEditCellValue' : 'setEditCellValue',
+        };
+
+        if (column.preProcessEditCellProps) {
+          const hasChanged = value !== editingState[id][field].value;
+
+          newProps = { ...newProps, isProcessingProps: true };
+
+          newProps = await Promise.resolve(
+            column.preProcessEditCellProps({ id, row, props: newProps, hasChanged }),
+          );
+        }
+
+        if (!newProps.error) {
+          callback(...args);
+        }
+      }
+    };
+
   useGridApiEventHandler(apiRef, 'cellDoubleClick', runIfEditModeIsCell(handleCellDoubleClick));
   useGridApiEventHandler(apiRef, 'cellFocusOut', runIfEditModeIsCell(handleCellFocusOut));
   useGridApiEventHandler(apiRef, 'cellKeyDown', runIfEditModeIsCell(handleCellKeyDown));
@@ -242,7 +278,7 @@ export const useGridCellEditing = (
   useGridApiEventHandler(apiRef, 'cellEditStop', runIfEditModeIsCell(handleCellEditStop));
 
   useGridApiOptionHandler(apiRef, 'cellEditStart', props.onCellEditStart);
-  useGridApiOptionHandler(apiRef, 'cellEditStop', props.onCellEditStop);
+  useGridApiOptionHandler(apiRef, 'cellEditStop', runIfNoPreProcessError(props.onCellEditStop));
 
   const getCellMode = React.useCallback<GridCellEditingApi['getCellMode']>(
     (id, field) => {