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 index 6c5ccec2e339..0e495c379482 100644 --- 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(' - Cell editing', () => { }); }); + it('should not publish onCellEditStop if field has error', async () => { + columnProps.preProcessEditCellProps = spy(({ props }: GridPreProcessEditCellProps) => ({ + ...props, + error: true, + })); + + const handleEditCellStop = spy(); + + render(); + 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 index d1f4f06b5da9..8220068b7d35 100644 --- 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 = + >>( + 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( (id, field) => {