[DataGrid] Only update input with value prop if debounce is off (mui#…

…5646)
m4theushw · Sep 14, 2022 · 1daff72 · 1daff72
1 parent 31038b4
commit 1daff72
Show file tree

Hide file tree

Showing 15 changed files with 80 additions and 16 deletions.
diff --git a/packages/grid/x-data-grid-pro/src/tests/cellEditing.DataGridPro.new.test.tsx b/packages/grid/x-data-grid-pro/src/tests/cellEditing.DataGridPro.new.test.tsx
@@ -187,6 +187,7 @@ describe('<DataGridPro /> - Cell Editing', () => {
           value: 'USD GBP',
           error: false,
           isProcessingProps: true,
+          changeReason: 'setEditCellValue',
         });
       });
 

diff --git a/packages/grid/x-data-grid-pro/src/tests/editComponents.DataGridPro.new.test.tsx b/packages/grid/x-data-grid-pro/src/tests/editComponents.DataGridPro.new.test.tsx
@@ -81,10 +81,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 />);
 
@@ -95,7 +96,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');
@@ -164,8 +165,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,
       });
     });
 

diff --git a/packages/grid/x-data-grid-pro/src/tests/rowEditing.DataGridPro.new.test.tsx b/packages/grid/x-data-grid-pro/src/tests/rowEditing.DataGridPro.new.test.tsx
@@ -233,6 +233,7 @@ describe('<DataGridPro /> - Row Editing', () => {
           value: 'USD GBP',
           error: false,
           isProcessingProps: true,
+          changeReason: 'setEditCellValue',
         });
 
         const args2 = column2Props.preProcessEditCellProps.lastCall.args[0];

diff --git a/packages/grid/x-data-grid/src/components/GridRow.tsx b/packages/grid/x-data-grid/src/components/GridRow.tsx
@@ -300,10 +300,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,
         };
 

diff --git a/packages/grid/x-data-grid/src/components/cell/GridEditBooleanCell.tsx b/packages/grid/x-data-grid/src/components/cell/GridEditBooleanCell.tsx
@@ -125,6 +125,7 @@ GridEditBooleanCell.propTypes = {
    * The mode of the cell.
    */
   cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
+  changeReason: PropTypes.oneOf(['debouncedSetEditCellValue', 'setEditCellValue']),
   /**
    * The column of the row that the current cell belongs to.
    */

diff --git a/packages/grid/x-data-grid/src/components/cell/GridEditDateCell.tsx b/packages/grid/x-data-grid/src/components/cell/GridEditDateCell.tsx
@@ -175,6 +175,7 @@ GridEditDateCell.propTypes = {
    * The mode of the cell.
    */
   cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
+  changeReason: PropTypes.oneOf(['debouncedSetEditCellValue', 'setEditCellValue']),
   /**
    * The column of the row that the current cell belongs to.
    */

diff --git a/packages/grid/x-data-grid/src/components/cell/GridEditInputCell.tsx b/packages/grid/x-data-grid/src/components/cell/GridEditInputCell.tsx
@@ -92,15 +92,31 @@ const GridEditInputCell = React.forwardRef<HTMLInputElement, GridEditInputCellPr
           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) {
@@ -138,6 +154,7 @@ GridEditInputCell.propTypes = {
    * The mode of the cell.
    */
   cellMode: PropTypes.oneOf(['edit', 'view']),
+  changeReason: PropTypes.oneOf(['debouncedSetEditCellValue', 'setEditCellValue']),
   /**
    * The column of the row that the current cell belongs to.
    */

diff --git a/packages/grid/x-data-grid/src/components/cell/GridEditSingleSelectCell.tsx b/packages/grid/x-data-grid/src/components/cell/GridEditSingleSelectCell.tsx
@@ -207,6 +207,7 @@ GridEditSingleSelectCell.propTypes = {
    * The mode of the cell.
    */
   cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
+  changeReason: PropTypes.oneOf(['debouncedSetEditCellValue', 'setEditCellValue']),
   /**
    * The column of the row that the current cell belongs to.
    */

diff --git a/packages/grid/x-data-grid/src/hooks/features/editRows/useGridCellEditing.new.ts b/packages/grid/x-data-grid/src/hooks/features/editRows/useGridCellEditing.new.ts
@@ -432,7 +432,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);
@@ -441,12 +441,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;

diff --git a/packages/grid/x-data-grid/src/hooks/features/editRows/useGridEditing.new.ts b/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');

diff --git a/packages/grid/x-data-grid/src/hooks/features/editRows/useGridRowEditing.new.ts b/packages/grid/x-data-grid/src/hooks/features/editRows/useGridRowEditing.new.ts
@@ -522,20 +522,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);

diff --git a/packages/grid/x-data-grid/src/models/api/gridEditingApi.ts b/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;
 }
 
 /**

diff --git a/packages/grid/x-data-grid/src/models/gridEditRowModel.ts b/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;
 }
 

diff --git a/packages/grid/x-data-grid/src/models/params/gridEditCellParams.ts b/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

diff --git a/packages/grid/x-data-grid/src/tests/rows.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/rows.DataGrid.test.tsx
@@ -752,7 +752,8 @@ describe('<DataGrid /> - Rows', () => {
       });
 
       it('should position correctly the render zone when the 2nd page has less rows than the 1st page', async function test() {
-        if (/edg/i.test(window.navigator.userAgent)) {
+        const { userAgent } = window.navigator;
+        if (!userAgent.includes('Headless') || /edg/i.test(userAgent)) {
           this.skip(); // FIXME: We need a waitFor that works with fake clock
         }
         const data = getBasicGridData(120, 3);