[DataGrid] Lower filter debounce delay (#9712)

docs/data/data-grid/demo/PopularFeaturesDemo.js

@@ -412,7 +412,7 @@ export default function PopularFeaturesDemo() {
           detailPanelCollapseIcon: ArrowUp,
         }}
         slotProps={{
-          toolbar: { showQuickFilter: true, quickFilterProps: { debounceMs: 500 } },
+          toolbar: { showQuickFilter: true },
         }}
         getDetailPanelContent={getDetailPanelContent}
         getDetailPanelHeight={getDetailPanelHeight}

docs/data/data-grid/demo/PopularFeaturesDemo.tsx

@@ -432,7 +432,7 @@ export default function PopularFeaturesDemo() {
           detailPanelCollapseIcon: ArrowUp,
         }}
         slotProps={{
-          toolbar: { showQuickFilter: true, quickFilterProps: { debounceMs: 500 } },
+          toolbar: { showQuickFilter: true },
         }}
         getDetailPanelContent={getDetailPanelContent}
         getDetailPanelHeight={getDetailPanelHeight}

docs/data/data-grid/filtering/CustomMultiValueOperator.js

@@ -1,13 +1,12 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import TextField from '@mui/material/TextField';
-import { DataGrid } from '@mui/x-data-grid';
+import { DataGrid, useGridRootProps } from '@mui/x-data-grid';
 import { useDemoData } from '@mui/x-data-grid-generator';
 import SyncIcon from '@mui/icons-material/Sync';
 
-const SUBMIT_FILTER_STROKE_TIME = 500;
-
 function InputNumberInterval(props) {
+  const rootProps = useGridRootProps();
   const { item, applyValue, focusElementRef = null } = props;
 
   const filterTimeout = React.useRef();
@@ -33,7 +32,7 @@ function InputNumberInterval(props) {
     filterTimeout.current = setTimeout(() => {
       setIsApplying(false);
       applyValue({ ...item, value: [lowerBound, upperBound] });
-    }, SUBMIT_FILTER_STROKE_TIME);
+    }, rootProps.filterDebounceMs);
   };
 
   const handleUpperFilterChange = (event) => {

docs/data/data-grid/filtering/CustomMultiValueOperator.tsx

@@ -7,13 +7,13 @@ import {
   GridFilterItem,
   GridFilterModel,
   GridFilterOperator,
+  useGridRootProps,
 } from '@mui/x-data-grid';
 import { useDemoData } from '@mui/x-data-grid-generator';
 import SyncIcon from '@mui/icons-material/Sync';
 
-const SUBMIT_FILTER_STROKE_TIME = 500;
-
 function InputNumberInterval(props: GridFilterInputValueProps) {
+  const rootProps = useGridRootProps();
   const { item, applyValue, focusElementRef = null } = props;
 
   const filterTimeout = React.useRef<any>();
@@ -41,7 +41,7 @@ function InputNumberInterval(props: GridFilterInputValueProps) {
     filterTimeout.current = setTimeout(() => {
       setIsApplying(false);
       applyValue({ ...item, value: [lowerBound, upperBound] });
-    }, SUBMIT_FILTER_STROKE_TIME);
+    }, rootProps.filterDebounceMs);
   };
 
   const handleUpperFilterChange: TextFieldProps['onChange'] = (event) => {

docs/data/data-grid/filtering/QuickFilteringGrid.js

@@ -30,7 +30,6 @@ export default function QuickFilteringGrid() {
         slotProps={{
           toolbar: {
             showQuickFilter: true,
-            quickFilterProps: { debounceMs: 500 },
           },
         }}
       />

docs/data/data-grid/filtering/QuickFilteringGrid.tsx

@@ -30,7 +30,6 @@ export default function QuickFilteringGrid() {
         slotProps={{
           toolbar: {
             showQuickFilter: true,
-            quickFilterProps: { debounceMs: 500 },
           },
         }}
       />

docs/data/data-grid/filtering/QuickFilteringGrid.tsx.preview

@@ -8,7 +8,6 @@
   slotProps={{
     toolbar: {
       showQuickFilter: true,
-      quickFilterProps: { debounceMs: 500 },
     },
   }}
 />

docs/data/data-grid/filtering/QuickFilteringInitialize.js

@@ -39,7 +39,6 @@ export default function QuickFilteringInitialize() {
         slotProps={{
           toolbar: {
             showQuickFilter: true,
-            quickFilterProps: { debounceMs: 500 },
           },
         }}
       />

docs/data/data-grid/filtering/QuickFilteringInitialize.tsx

@@ -39,7 +39,6 @@ export default function QuickFilteringInitialize() {
         slotProps={{
           toolbar: {
             showQuickFilter: true,
-            quickFilterProps: { debounceMs: 500 },
           },
         }}
       />

docs/pages/x/api/data-grid/data-grid-premium.json

@@ -82,6 +82,7 @@
         "description": "{ ariaV7?: bool, clipboardPaste?: bool, columnGrouping?: bool, lazyLoading?: bool, warnIfFocusStateIsNotSynced?: bool }"
       }
     },
+    "filterDebounceMs": { "type": { "name": "number" }, "default": "150" },
     "filterMode": {
       "type": { "name": "custom", "description": "'client'<br>&#124;&nbsp;'server'" },
       "default": "\"client\""

docs/pages/x/api/data-grid/data-grid-pro.json

@@ -70,6 +70,7 @@
         "description": "{ ariaV7?: bool, columnGrouping?: bool, lazyLoading?: bool, warnIfFocusStateIsNotSynced?: bool }"
       }
     },
+    "filterDebounceMs": { "type": { "name": "number" }, "default": "150" },
     "filterMode": {
       "type": { "name": "custom", "description": "'client'<br>&#124;&nbsp;'server'" },
       "default": "\"client\""

docs/pages/x/api/data-grid/data-grid.json

@@ -51,6 +51,7 @@
         "description": "{ ariaV7?: bool, columnGrouping?: bool, warnIfFocusStateIsNotSynced?: bool }"
       }
     },
+    "filterDebounceMs": { "type": { "name": "number" }, "default": "150" },
     "filterMode": {
       "type": { "name": "enum", "description": "'client'<br>&#124;&nbsp;'server'" },
       "default": "\"client\""

docs/pages/x/api/data-grid/grid-toolbar-quick-filter.json

@@ -1,6 +1,6 @@
 {
   "props": {
-    "debounceMs": { "type": { "name": "number" }, "default": "500" },
+    "debounceMs": { "type": { "name": "number" }, "default": "150" },
     "quickFilterFormatter": {
       "type": { "name": "func" },
       "signature": {

docs/translations/api-docs/data-grid/data-grid-premium.json

@@ -211,6 +211,11 @@
       "deprecated": "",
       "typeDescriptions": {}
     },
+    "filterDebounceMs": {
+      "description": "The milliseconds delay to wait after a keystroke before triggering filtering.",
+      "deprecated": "",
+      "typeDescriptions": {}
+    },
     "filterMode": {
       "description": "Filtering can be processed on the server or client-side. Set it to 'server' if you would like to handle filtering on the server-side.",
       "deprecated": "",

docs/translations/api-docs/data-grid/data-grid-pro.json

@@ -181,6 +181,11 @@
       "deprecated": "",
       "typeDescriptions": {}
     },
+    "filterDebounceMs": {
+      "description": "The milliseconds delay to wait after a keystroke before triggering filtering.",
+      "deprecated": "",
+      "typeDescriptions": {}
+    },
     "filterMode": {
       "description": "Filtering can be processed on the server or client-side. Set it to 'server' if you would like to handle filtering on the server-side.",
       "deprecated": "",

docs/translations/api-docs/data-grid/data-grid.json

@@ -126,6 +126,11 @@
       "deprecated": "",
       "typeDescriptions": {}
     },
+    "filterDebounceMs": {
+      "description": "The milliseconds delay to wait after a keystroke before triggering filtering.",
+      "deprecated": "",
+      "typeDescriptions": {}
+    },
     "filterMode": {
       "description": "Filtering can be processed on the server or client-side. Set it to 'server' if you would like to handle filtering on the server-side.",
       "deprecated": "",

package.json

@@ -64,7 +64,7 @@
     "release:publish": "lerna publish from-package --no-private --dist-tag latest --contents build",
     "release:publish:dry-run": "lerna publish from-package --dist-tag latest --contents build --registry=\"http://localhost:4873/\"",
     "release:tag": "node scripts/releaseTag.mjs",
-    "validate": "concurrently \"yarn prettier && yarn eslint\" \"yarn docs:typescript:formatted\" \"yarn docs:api\""
+    "validate": "concurrently \"yarn prettier && yarn eslint\" \"yarn proptypes\" \"yarn docs:typescript:formatted\" \"yarn docs:api\""
   },
   "devDependencies": {
     "@argos-ci/core": "^0.9.0",

packages/grid/x-data-grid-premium/src/DataGridPremium/DataGrid.tsx

@@ -1,3 +1,5 @@
+export { SUBMIT_FILTER_STROKE_TIME, SUBMIT_FILTER_DATE_STROKE_TIME } from '@mui/x-data-grid';
+
 /**
  * @deprecated Import DataGridPremium instead.
  */

packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx

@@ -291,6 +291,11 @@ DataGridPremiumRaw.propTypes = {
     lazyLoading: PropTypes.bool,
     warnIfFocusStateIsNotSynced: PropTypes.bool,
   }),
+  /**
+   * The milliseconds delay to wait after a keystroke before triggering filtering.
+   * @default 150
+   */
+  filterDebounceMs: PropTypes.number,
   /**
    * Filtering can be processed on the server or client-side.
    * Set it to 'server' if you would like to handle filtering on the server-side.

packages/grid/x-data-grid-pro/src/DataGridPro/DataGrid.tsx

@@ -1,3 +1,5 @@
+export { SUBMIT_FILTER_STROKE_TIME, SUBMIT_FILTER_DATE_STROKE_TIME } from '@mui/x-data-grid';
+
 /**
  * @deprecated Import DataGridPro instead.
  */

packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx

@@ -258,6 +258,11 @@ DataGridProRaw.propTypes = {
     lazyLoading: PropTypes.bool,
     warnIfFocusStateIsNotSynced: PropTypes.bool,
   }),
+  /**
+   * The milliseconds delay to wait after a keystroke before triggering filtering.
+   * @default 150
+   */
+  filterDebounceMs: PropTypes.number,
   /**
    * Filtering can be processed on the server or client-side.
    * Set it to 'server' if you would like to handle filtering on the server-side.

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

@@ -6,7 +6,7 @@ import {
   GridLogicOperator,
   GridPreferencePanelsValue,
   GridRowModel,
-  SUBMIT_FILTER_STROKE_TIME,
+  DATA_GRID_PRO_PROPS_DEFAULT_VALUES,
   useGridApiRef,
   DataGridPro,
   GetColumnForNewFilterArgs,
@@ -21,6 +21,8 @@ import * as React from 'react';
 import { spy } from 'sinon';
 import { getColumnHeaderCell, getColumnValues } from 'test/utils/helperFn';
 
+const SUBMIT_FILTER_STROKE_TIME = DATA_GRID_PRO_PROPS_DEFAULT_VALUES.filterDebounceMs;
+
 const isJSDOM = /jsdom/.test(window.navigator.userAgent);
 
 describe('<DataGridPro /> - Filter', () => {

packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx

@@ -5,7 +5,7 @@ import { GridBody, GridFooterPlaceholder, GridHeader, GridRoot } from '../compon
 import { DataGridProps } from '../models/props/DataGridProps';
 import { GridContextProvider } from '../context/GridContextProvider';
 import { useDataGridComponent } from './useDataGridComponent';
-import { useDataGridProps } from './useDataGridProps';
+import { useDataGridProps, DATA_GRID_PROPS_DEFAULT_VALUES } from './useDataGridProps';
 import { DataGridVirtualScroller } from '../components/DataGridVirtualScroller';
 import { GridValidRowModel } from '../models/gridRows';
 
@@ -42,6 +42,18 @@ interface DataGridComponent {
 
 export const DataGrid = React.memo(DataGridRaw) as DataGridComponent;
 
+/**
+ * Remove at v7
+ * @deprecated
+ */
+export const SUBMIT_FILTER_STROKE_TIME = DATA_GRID_PROPS_DEFAULT_VALUES.filterDebounceMs;
+
+/**
+ * Remove at v7
+ * @deprecated
+ */
+export const SUBMIT_FILTER_DATE_STROKE_TIME = DATA_GRID_PROPS_DEFAULT_VALUES.filterDebounceMs;
+
 DataGridRaw.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -186,6 +198,11 @@ DataGridRaw.propTypes = {
     columnGrouping: PropTypes.bool,
     warnIfFocusStateIsNotSynced: PropTypes.bool,
   }),
+  /**
+   * The milliseconds delay to wait after a keystroke before triggering filtering.
+   * @default 150
+   */
+  filterDebounceMs: PropTypes.number,
   /**
    * Filtering can be processed on the server or client-side.
    * Set it to 'server' if you would like to handle filtering on the server-side.

packages/grid/x-data-grid/src/DataGrid/useDataGridProps.ts

@@ -55,6 +55,7 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES: DataGridPropsWithDefaultValues = {
   disableVirtualization: false,
   editMode: GridEditModes.Cell,
   filterMode: 'client',
+  filterDebounceMs: 150,
   columnHeaderHeight: 56,
   hideFooter: false,
   hideFooterPagination: false,

packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputDate.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { TextFieldProps } from '@mui/material/TextField';
 import { unstable_useId as useId } from '@mui/utils';
+import { useTimeout } from '../../../hooks/utils/useTimeout';
 import { GridFilterInputValueProps } from './GridFilterInputValueProps';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 
@@ -16,8 +17,6 @@ export type GridFilterInputDateProps = GridFilterInputValueProps &
     isFilterActive?: boolean;
   };
 
-export const SUBMIT_FILTER_DATE_STROKE_TIME = 500;
-
 function GridFilterInputDate(props: GridFilterInputDateProps) {
   const {
     item,
@@ -32,7 +31,7 @@ function GridFilterInputDate(props: GridFilterInputDateProps) {
     disabled,
     ...other
   } = props;
-  const filterTimeout = React.useRef<any>();
+  const filterTimeout = useTimeout();
   const [filterValueState, setFilterValueState] = React.useState(item.value ?? '');
   const [applying, setIsApplying] = React.useState(false);
   const id = useId();
@@ -42,24 +41,17 @@ function GridFilterInputDate(props: GridFilterInputDateProps) {
     (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
       const value = event.target.value;
 
-      clearTimeout(filterTimeout.current);
       setFilterValueState(String(value));
 
       setIsApplying(true);
-      filterTimeout.current = setTimeout(() => {
+      filterTimeout.start(rootProps.filterDebounceMs, () => {
         applyValue({ ...item, value });
         setIsApplying(false);
-      }, SUBMIT_FILTER_DATE_STROKE_TIME);
+      });
     },
-    [applyValue, item],
+    [applyValue, item, rootProps.filterDebounceMs, filterTimeout],
   );
 
-  React.useEffect(() => {
-    return () => {
-      clearTimeout(filterTimeout.current);
-    };
-  }, []);
-
   React.useEffect(() => {
     const itemValue = item.value ?? '';
     setFilterValueState(String(itemValue));