[DataGrid] Fix calling onCellEditStop on error (#12747)

Signed-off-by: Andrew Cherniavskii <andrew.cherniavskii@gmail.com> Co-authored-by: Andrew Cherniavskii <andrew.cherniavskii@gmail.com>
mui · Apr 15, 2024 · 559ae09 · 559ae09
1 parent 5c54c78
commit 559ae09
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 1 deletion.
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
@@ -190,6 +190,33 @@ describe('<DataGridPro /> - Cell editing', () => {
         });
       });
 
+      it('should not publish onCellEditStop if field has 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,

diff --git a/packages/x-data-grid/src/hooks/features/editing/useGridCellEditing.ts b/packages/x-data-grid/src/hooks/features/editing/useGridCellEditing.ts
@@ -234,6 +234,21 @@ export const useGridCellEditing = (
     [apiRef],
   );
 
+  const runIfNoFieldErrors =
+    <Args extends Parameters<GridEventListener<'cellEditStop'>>>(
+      callback?: (...args: Args) => void,
+    ) =>
+    async (...args: Args) => {
+      if (callback) {
+        const { id, field } = args[0];
+        const editRowsState = apiRef.current.state.editRows;
+        const hasFieldErrors = editRowsState[id][field]?.error;
+        if (!hasFieldErrors) {
+          callback(...args);
+        }
+      }
+    };
+
   useGridApiEventHandler(apiRef, 'cellDoubleClick', runIfEditModeIsCell(handleCellDoubleClick));
   useGridApiEventHandler(apiRef, 'cellFocusOut', runIfEditModeIsCell(handleCellFocusOut));
   useGridApiEventHandler(apiRef, 'cellKeyDown', runIfEditModeIsCell(handleCellKeyDown));
@@ -242,7 +257,7 @@ export const useGridCellEditing = (
   useGridApiEventHandler(apiRef, 'cellEditStop', runIfEditModeIsCell(handleCellEditStop));
 
   useGridApiOptionHandler(apiRef, 'cellEditStart', props.onCellEditStart);
-  useGridApiOptionHandler(apiRef, 'cellEditStop', props.onCellEditStop);
+  useGridApiOptionHandler(apiRef, 'cellEditStop', runIfNoFieldErrors(props.onCellEditStop));
 
   const getCellMode = React.useCallback<GridCellEditingApi['getCellMode']>(
     (id, field) => {