[DataGrid] Do not publish rowEditStop event if row has fields with …

…errors (mui#11383)
Janpot · Mar 26, 2024 · 5e99aa1 · 5e99aa1
1 parent 2ac14fd
commit 5e99aa1
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 8 deletions.
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
@@ -971,6 +971,26 @@ describe('<DataGridPro /> - Row editing', () => {
         expect(listener.lastCall.args[0].reason).to.equal('rowFocusOut');
       });
 
+      it(`should not publish 'rowEditStop' if field has error`, async () => {
+        column1Props.preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) => ({
+          ...props,
+          error: true,
+        });
+        render(<TestCase />);
+        const listener = spy();
+        apiRef.current.subscribeEvent('rowEditStop', listener);
+        const cell = getCell(0, 1);
+        fireEvent.doubleClick(cell);
+        await act(() =>
+          apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }),
+        );
+        expect(listener.callCount).to.equal(0);
+
+        userEvent.mousePress(getCell(1, 1));
+        clock.runToLast();
+        expect(listener.callCount).to.equal(0);
+      });
+
       it('should call stopRowEditMode with ignoreModifications=false and no cellToFocusAfter', () => {
         render(<TestCase />);
         const spiedStopRowEditMode = spyApi(apiRef.current, 'stopRowEditMode');
@@ -1014,6 +1034,25 @@ describe('<DataGridPro /> - Row editing', () => {
         expect(listener.lastCall.args[0].reason).to.equal('escapeKeyDown');
       });
 
+      it(`should publish 'rowEditStop' even if field has error`, async () => {
+        column1Props.preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) => ({
+          ...props,
+          error: true,
+        });
+        render(<TestCase />);
+        const listener = spy();
+        apiRef.current.subscribeEvent('rowEditStop', listener);
+        const cell = getCell(0, 1);
+        fireEvent.doubleClick(cell);
+        await act(() =>
+          apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }),
+        );
+        expect(listener.callCount).to.equal(0);
+
+        fireEvent.keyDown(cell.querySelector('input')!, { key: 'Escape' });
+        expect(listener.lastCall.args[0].reason).to.equal('escapeKeyDown');
+      });
+
       it('should call stopRowEditMode with ignoreModifications=true', () => {
         render(<TestCase />);
         const spiedStopRowEditMode = spyApi(apiRef.current, 'stopRowEditMode');
@@ -1044,6 +1083,25 @@ describe('<DataGridPro /> - Row editing', () => {
         expect(listener.lastCall.args[0].reason).to.equal('enterKeyDown');
       });
 
+      it(`should not publish 'rowEditStop' if field has error`, async () => {
+        column1Props.preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) => ({
+          ...props,
+          error: true,
+        });
+        render(<TestCase />);
+        const listener = spy();
+        apiRef.current.subscribeEvent('rowEditStop', listener);
+        const cell = getCell(0, 1);
+        fireEvent.doubleClick(cell);
+        await act(() =>
+          apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }),
+        );
+        expect(listener.callCount).to.equal(0);
+
+        fireEvent.keyDown(cell.querySelector('input')!, { key: 'Enter' });
+        expect(listener.callCount).to.equal(0);
+      });
+
       it('should call stopRowEditMode with ignoreModifications=false and cellToFocusAfter=below', () => {
         render(<TestCase />);
         const spiedStopRowEditMode = spyApi(apiRef.current, 'stopRowEditMode');

diff --git a/packages/x-data-grid/src/hooks/features/editing/useGridRowEditing.ts b/packages/x-data-grid/src/hooks/features/editing/useGridRowEditing.ts
@@ -110,6 +110,14 @@ export const useGridRowEditing = (
     [apiRef],
   );
 
+  const hasFieldsWithErrors = React.useCallback(
+    (rowId: GridRowId) => {
+      const editingState = gridEditRowsStateSelector(apiRef.current.state);
+      return Object.values(editingState[rowId]).some((fieldProps) => fieldProps.error);
+    },
+    [apiRef],
+  );
+
   const handleCellDoubleClick = React.useCallback<GridEventListener<'cellDoubleClick'>>(
     (params, event) => {
       if (!params.isEditable) {
@@ -159,8 +167,12 @@ export const useGridRowEditing = (
             return;
           }
 
+          if (hasFieldsWithErrors(params.id)) {
+            return;
+          }
+
           const rowParams = apiRef.current.getRowParams(params.id);
-          const newParams = {
+          const newParams: GridRowEditStopParams = {
             ...rowParams,
             field: params.field,
             reason: GridRowEditStopReasons.rowFocusOut,
@@ -169,7 +181,7 @@ export const useGridRowEditing = (
         }
       });
     },
-    [apiRef],
+    [apiRef, hasFieldsWithErrors],
   );
 
   React.useEffect(() => {
@@ -223,6 +235,9 @@ export const useGridRowEditing = (
         }
 
         if (reason) {
+          if (reason !== GridRowEditStopReasons.escapeKeyDown && hasFieldsWithErrors(params.id)) {
+            return;
+          }
           const newParams: GridRowEditStopParams = {
             ...apiRef.current.getRowParams(params.id),
             reason,
@@ -264,7 +279,7 @@ export const useGridRowEditing = (
         }
       }
     },
-    [apiRef],
+    [apiRef, hasFieldsWithErrors],
   );
 
   const handleRowEditStart = React.useCallback<GridEventListener<'rowEditStart'>>(
@@ -487,11 +502,7 @@ export const useGridRowEditing = (
         return;
       }
 
-      const hasSomeFieldWithError = Object.values(editingState[id]).some(
-        (fieldProps) => fieldProps.error,
-      );
-
-      if (hasSomeFieldWithError) {
+      if (hasFieldsWithErrors(id)) {
         prevRowModesModel.current[id].mode = GridRowModes.Edit;
         // Revert the mode in the rowModesModel prop back to "edit"
         updateRowInRowModesModel(id, { mode: GridRowModes.Edit });