[DataGrid] Only update input with value prop if debounce is off

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

@@ -175,6 +175,7 @@ describe('<DataGridPro /> - Cell Editing', () => {
           value: 'USD GBP',
           error: false,
           isProcessingProps: true,
+          changeReason: 'setEditCellValue',
         });
       });
 

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

@@ -83,10 +83,11 @@ describe('<DataGridPro /> - Edit Components', () => {
         field: 'brand',
         value: 'Puma',
         debounceMs: 200,
+        unstable_skipValueParser: true,
       });
     });
 
-    it('should the value prop to the input', () => {
+    it('should pass the value prop to the input', () => {
       defaultData.columns[0].valueParser = (value) => (value as string).toUpperCase();
       render(<TestCase />);
 
@@ -97,7 +98,7 @@ describe('<DataGridPro /> - Edit Components', () => {
       expect(input.value).to.equal('Nike');
 
       fireEvent.change(input, { target: { value: 'Puma' } });
-      expect(input.value).to.equal('Puma');
+      expect(input.value).to.equal('PUMA');
 
       clock.tick(200);
       expect(input.value).to.equal('PUMA');
@@ -166,8 +167,9 @@ describe('<DataGridPro /> - Edit Components', () => {
       expect(spiedSetEditCellValue.lastCall.args[0]).to.deep.equal({
         id: 0,
         field: 'quantity',
-        value: '110',
+        value: 110,
         debounceMs: 200,
+        unstable_skipValueParser: true,
       });
     });
 

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

@@ -221,6 +221,7 @@ describe('<DataGridPro /> - Row Editing', () => {
           value: 'USD GBP',
           error: false,
           isProcessingProps: true,
+          changeReason: 'setEditCellValue',
         });
 
         const args2 = column2Props.preProcessEditCellProps.lastCall.args[0];

packages/grid/x-data-grid/src/components/GridRow.tsx

@@ -331,10 +331,12 @@ function GridRow(props: React.HTMLAttributes<HTMLDivElement> & GridRowProps) {
         updatedRow = apiRef.current.unstable_getRowWithUpdatedValues(rowId, column.field);
       }
 
+      const { changeReason, ...editCellStateRest } = editCellState;
+
       const params: GridRenderEditCellParams = {
         ...cellParams,
         row: updatedRow,
-        ...editCellState,
+        ...editCellStateRest,
         api: apiRef.current,
       };
 

packages/grid/x-data-grid/src/components/cell/GridEditInputCell.tsx

@@ -79,7 +79,7 @@ function GridEditInputCell(props: GridEditInputCellProps) {
 
   const apiRef = useGridApiContext();
   const inputRef = React.useRef<HTMLInputElement>();
-  const [valueState, setValueState] = React.useState(value);
+  const [valueState, setValueState] = React.useState<any>(value);
   const ownerState = { classes: rootProps.classes };
   const classes = useUtilityClasses(ownerState);
 
@@ -91,15 +91,31 @@ function GridEditInputCell(props: GridEditInputCellProps) {
         await onValueChange(event, newValue);
       }
 
-      setValueState(newValue);
-      apiRef.current.setEditCellValue({ id, field, value: newValue, debounceMs }, event);
+      const column = apiRef.current.getColumn(field);
+
+      let parsedValue = newValue;
+      if (column.valueParser && rootProps.experimentalFeatures?.newEditingApi) {
+        parsedValue = column.valueParser(newValue, apiRef.current.getCellParams(id, field));
+      }
+
+      setValueState(parsedValue);
+      apiRef.current.setEditCellValue(
+        { id, field, value: parsedValue, debounceMs, unstable_skipValueParser: true },
+        event,
+      );
     },
-    [apiRef, debounceMs, field, id, onValueChange],
+    [apiRef, debounceMs, field, id, onValueChange, rootProps.experimentalFeatures?.newEditingApi],
   );
 
+  const meta = apiRef.current.unstable_getEditCellMeta
+    ? apiRef.current.unstable_getEditCellMeta(id, field)
+    : {};
+
   React.useEffect(() => {
-    setValueState(value);
-  }, [value]);
+    if (meta.changeReason !== 'debouncedSetEditCellValue') {
+      setValueState(value);
+    }
+  }, [meta.changeReason, value]);
 
   useEnhancedEffect(() => {
     if (hasFocus) {

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

@@ -426,7 +426,7 @@ export const useGridCellEditing = (
     GridNewCellEditingApi['unstable_setCellEditingEditCellValue']
   >(
     async (params) => {
-      const { id, field, value } = params;
+      const { id, field, value, debounceMs, unstable_skipValueParser: skipValueParser } = params;
 
       throwIfNotEditable(id, field);
       throwIfNotInMode(id, field, GridCellModes.Edit);
@@ -435,12 +435,16 @@ export const useGridCellEditing = (
       const row = apiRef.current.getRow(id)!;
 
       let parsedValue = value;
-      if (column.valueParser) {
+      if (column.valueParser && !skipValueParser) {
         parsedValue = column.valueParser(value, apiRef.current.getCellParams(id, field));
       }
 
       let editingState = gridEditRowsStateSelector(apiRef.current.state);
-      let newProps: GridEditCellProps = { ...editingState[id][field], value: parsedValue };
+      let newProps: GridEditCellProps = {
+        ...editingState[id][field],
+        value: parsedValue,
+        changeReason: debounceMs ? 'debouncedSetEditCellValue' : 'setEditCellValue',
+      };
 
       if (column.preProcessEditCellProps) {
         const hasChanged = value !== editingState[id][field].value;

packages/grid/x-data-grid/src/hooks/features/editRows/useGridEditing.new.ts

@@ -8,6 +8,7 @@ import { useGridCellEditing } from './useGridCellEditing.new';
 import { GridCellModes, GridEditModes } from '../../../models/gridEditRowModel';
 import { useGridRowEditing } from './useGridRowEditing.new';
 import { GridStateInitializer } from '../../utils/useGridInitializeState';
+import { gridEditRowsStateSelector } from './gridEditRowsSelector';
 
 export const editingStateInitializer: GridStateInitializer = (state) => ({
   ...state,
@@ -156,11 +157,21 @@ export const useGridEditing = (
     [apiRef, props.editMode],
   );
 
+  const getEditCellMeta = React.useCallback<GridNewEditingSharedApi['unstable_getEditCellMeta']>(
+    (id, field) => {
+      const editingState = gridEditRowsStateSelector(apiRef.current.state);
+
+      return { changeReason: editingState[id][field].changeReason };
+    },
+    [apiRef],
+  );
+
   const editingSharedApi: GridNewEditingSharedApi = {
     isCellEditable,
     setEditCellValue,
     unstable_runPendingEditCellValueMutation: runPendingEditCellValueMutation,
     unstable_getRowWithUpdatedValues: getRowWithUpdatedValues,
+    unstable_getEditCellMeta: getEditCellMeta,
   };
 
   useGridApiMethod(apiRef, editingSharedApi, 'EditingApi');

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

@@ -516,20 +516,24 @@ export const useGridRowEditing = (
     GridNewRowEditingApi['unstable_setRowEditingEditCellValue']
   >(
     (params) => {
-      const { id, field, value } = params;
+      const { id, field, value, debounceMs, unstable_skipValueParser: skipValueParser } = params;
 
       throwIfNotEditable(id, field);
 
       const column = apiRef.current.getColumn(field);
       const row = apiRef.current.getRow(id)!;
 
       let parsedValue = value;
-      if (column.valueParser) {
+      if (column.valueParser && !skipValueParser) {
         parsedValue = column.valueParser(value, apiRef.current.getCellParams(id, field));
       }
 
       let editingState = gridEditRowsStateSelector(apiRef.current.state);
-      let newProps = { ...editingState[id][field], value: parsedValue };
+      let newProps: GridEditCellProps = {
+        ...editingState[id][field],
+        value: parsedValue,
+        changeReason: debounceMs ? 'debouncedSetEditCellValue' : 'setEditCellValue',
+      };
 
       if (!column.preProcessEditCellProps) {
         updateOrDeleteFieldState(id, field, newProps);

packages/grid/x-data-grid/src/models/api/gridEditingApi.ts

@@ -26,6 +26,10 @@ export type GridRowModesModelProps =
 
 export type GridRowModesModel = Record<GridRowId, GridRowModesModelProps>;
 
+export interface GridEditCellMeta {
+  changeReason?: 'debouncedSetEditCellValue' | 'setEditCellValue';
+}
+
 export interface GridNewEditingSharedApi {
   /**
    * Controls if a cell is editable.
@@ -59,6 +63,13 @@ export interface GridNewEditingSharedApi {
    * @ignore - do not document.
    */
   unstable_getRowWithUpdatedValues: (id: GridRowId, field: string) => GridRowModel;
+  /**
+   * Gets the meta information for the edit cell.
+   * @param {GridRowId} id The row id being edited.
+   * @param {string} field The field being edited.
+   * @ignore - do not document.
+   */
+  unstable_getEditCellMeta: (id: GridRowId, field: string) => GridEditCellMeta;
 }
 
 /**

packages/grid/x-data-grid/src/models/gridEditRowModel.ts

@@ -1,7 +1,10 @@
+import type { GridEditCellMeta } from './api/gridEditingApi';
+
 export interface GridEditCellProps<V = any> {
   value?: V | undefined;
   isValidating?: boolean;
   isProcessingProps?: boolean;
+  changeReason?: GridEditCellMeta['changeReason'];
   [prop: string]: any;
 }
 

packages/grid/x-data-grid/src/models/params/gridEditCellParams.ts

@@ -29,6 +29,10 @@ export interface GridEditCellValueParams {
    * The debounce time in milliseconds.
    */
   debounceMs?: number;
+  /**
+   * TBD
+   */
+  unstable_skipValueParser?: boolean;
 }
 
 // TODO v6 - remove