[DataGrid] Lower filter debounce delay

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": "{ 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": "{ 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": "{ 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" } },
     "quickFilterParser": { "type": { "name": "func" } }
   },

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

@@ -43,6 +43,7 @@
     "disableVirtualization": "If <code>true</code>, the virtualization is disabled.",
     "editMode": "Controls whether to use the cell or row editing.",
     "experimentalFeatures": "Unstable features, breaking changes might be introduced. For each feature, if the flag is not explicitly set to <code>true</code>, then the feature is fully disabled, and neither property nor method calls will have any effect.",
+    "filterDebounceMs": "The milliseconds delay to wait after a keystroke before triggering filtering.",
     "filterMode": "Filtering can be processed on the server or client-side. Set it to &#39;server&#39; if you would like to handle filtering on the server-side.",
     "filterModel": "Set the filter model of the grid.",
     "getAggregationPosition": "Determines the position of an aggregated value.<br><br><strong>Signature:</strong><br><code>function(groupNode: GridGroupNode) =&gt; GridAggregationPosition | null</code><br><em>groupNode:</em> The current group.<br> <em>returns</em> (GridAggregationPosition | null): Position of the aggregated value (if <code>null</code>, the group isn&#39;t aggregated).",

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

@@ -37,6 +37,7 @@
     "disableVirtualization": "If <code>true</code>, the virtualization is disabled.",
     "editMode": "Controls whether to use the cell or row editing.",
     "experimentalFeatures": "Unstable features, breaking changes might be introduced. For each feature, if the flag is not explicitly set to <code>true</code>, the feature will be fully disabled and any property / method call will not have any effect.",
+    "filterDebounceMs": "The milliseconds delay to wait after a keystroke before triggering filtering.",
     "filterMode": "Filtering can be processed on the server or client-side. Set it to &#39;server&#39; if you would like to handle filtering on the server-side.",
     "filterModel": "Set the filter model of the grid.",
     "getCellClassName": "Function that applies CSS classes dynamically on cells.<br><br><strong>Signature:</strong><br><code>function(params: GridCellParams) =&gt; string</code><br><em>params:</em> With all properties from <a href=\"/x/api/data-grid/grid-cell-params/\">GridCellParams</a>.<br> <em>returns</em> (string): The CSS class to apply to the cell.",

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

@@ -26,6 +26,7 @@
     "disableVirtualization": "If <code>true</code>, the virtualization is disabled.",
     "editMode": "Controls whether to use the cell or row editing.",
     "experimentalFeatures": "Unstable features, breaking changes might be introduced. For each feature, if the flag is not explicitly set to <code>true</code>, the feature will be fully disabled and any property / method call will not have any effect.",
+    "filterDebounceMs": "The milliseconds delay to wait after a keystroke before triggering filtering.",
     "filterMode": "Filtering can be processed on the server or client-side. Set it to &#39;server&#39; if you would like to handle filtering on the server-side.",
     "filterModel": "Set the filter model of the grid.",
     "getCellClassName": "Function that applies CSS classes dynamically on cells.<br><br><strong>Signature:</strong><br><code>function(params: GridCellParams) =&gt; string</code><br><em>params:</em> With all properties from <a href=\"/x/api/data-grid/grid-cell-params/\">GridCellParams</a>.<br> <em>returns</em> (string): The CSS class to apply to the cell.",

package.json

@@ -65,7 +65,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

@@ -290,6 +290,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

@@ -257,6 +257,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 |
@@ -185,6 +197,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));

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

@@ -2,11 +2,10 @@ 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';
 
-export const SUBMIT_FILTER_STROKE_TIME = 500;
-
 export type GridTypeFilterInputValueProps = GridFilterInputValueProps &
   TextFieldProps & {
     type?: 'text' | 'number' | 'date' | 'datetime-local';
@@ -32,7 +31,7 @@ function GridFilterInputValue(props: GridTypeFilterInputValueProps) {
     InputProps,
     ...others
   } = props;
-  const filterTimeout = React.useRef<any>();
+  const filterTimeout = useTimeout();
   const [filterValueState, setFilterValueState] = React.useState<string>(item.value ?? '');
   const [applying, setIsApplying] = React.useState(false);
   const id = useId();
@@ -41,29 +40,17 @@ function GridFilterInputValue(props: GridTypeFilterInputValueProps) {
   const onFilterChange = React.useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
       const { value } = event.target;
-      clearTimeout(filterTimeout.current);
       setFilterValueState(String(value));
 
       setIsApplying(true);
-      filterTimeout.current = setTimeout(() => {
+      filterTimeout.start(rootProps.filterDebounceMs, () => {
         applyValue({ ...item, value });
         setIsApplying(false);
-      }, SUBMIT_FILTER_STROKE_TIME);
+      });
     },
-    [applyValue, item],
+    [applyValue, item, rootProps.filterDebounceMs, filterTimeout],
   );
 
-  React.useEffect(() => {
-    return () => {
-      clearTimeout(filterTimeout.current);
-    };
-  }, []);
-
-  React.useEffect(() => {
-    const itemValue = item.value ?? '';
-    setFilterValueState(String(itemValue));
-  }, [item.value]);
-
   return (
     <rootProps.slots.baseTextField
       id={id}

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

@@ -87,12 +87,7 @@ const GridFilterPanel = React.forwardRef<HTMLDivElement, GridFilterPanelProps>(
       ...other
     } = props;
 
-    const applyFilter = React.useCallback(
-      (item: GridFilterItem) => {
-        apiRef.current.upsertFilterItem(item);
-      },
-      [apiRef],
-    );
+    const applyFilter = apiRef.current.upsertFilterItem;
 
     const applyFilterLogicOperator = React.useCallback(
       (operator: GridLogicOperator) => {