[DataGrid] Fix quickfilter undefined row error (#9708)

mui · Jul 19, 2023 · 6894da1 · 6894da1
1 parent e0fd705
commit 6894da1
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 4 deletions.
diff --git a/packages/grid/x-data-grid/src/hooks/features/filter/useGridFilter.tsx b/packages/grid/x-data-grid/src/hooks/features/filter/useGridFilter.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { defaultMemoize } from 'reselect';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
 import { GridEventListener } from '../../../models/events';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
@@ -7,6 +8,7 @@ import { GridFilterApi } from '../../../models/api/gridFilterApi';
 import { GridFilterItem } from '../../../models/gridFilterItem';
 import { GridRowId } from '../../../models/gridRows';
 import { GridStateCommunity } from '../../../models/gridStateCommunity';
+import { useLazyRef } from '../../utils/useLazyRef';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
@@ -64,6 +66,10 @@ function getVisibleRowsLookupState(
   });
 }
 
+function createMemoizedValues() {
+  return defaultMemoize(Object.values);
+}
+
 /**
  * @requires useGridColumns (method, event)
  * @requires useGridParamsApi (method)
@@ -389,9 +395,8 @@ export const useGridFilter = (
     [props.slots.filterPanel, props.slotProps?.filterPanel],
   );
 
-  const dataRowIdToIdLookup = apiRef.current.state.rows.dataRowIdToModelLookup;
-  const rows = React.useMemo(() => Object.values(dataRowIdToIdLookup), [dataRowIdToIdLookup]);
   const { getRowId } = props;
+  const getRowsRef = useLazyRef(createMemoizedValues);
 
   const flatFilteringMethod = React.useCallback<GridStrategyProcessor<'filtering'>>(
     (params) => {
@@ -412,6 +417,7 @@ export const useGridFilter = (
         passingQuickFilterValues: null,
       };
 
+      const rows = getRowsRef.current(apiRef.current.state.rows.dataRowIdToModelLookup);
       for (let i = 0; i < rows.length; i += 1) {
         const row = rows[i];
         const id = getRowId ? getRowId(row) : row.id;
@@ -440,7 +446,7 @@ export const useGridFilter = (
         filteredDescendantCountLookup: {},
       };
     },
-    [apiRef, rows, props.filterMode, getRowId],
+    [apiRef, props.filterMode, getRowId, getRowsRef],
   );
 
   useGridRegisterPipeProcessor(apiRef, 'columnMenu', addColumnMenuItem);

diff --git a/packages/grid/x-data-grid/src/tests/quickFiltering.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/quickFiltering.DataGrid.test.tsx
@@ -572,7 +572,7 @@ describe('<DataGrid /> - Quick Filter', () => {
     });
   });
 
-  // See https://github.com/mui/mui-x/issues/6783
+  // https://github.com/mui/mui-x/issues/6783
   it('should not override user input when typing', async function test() {
     if (isJSDOM) {
       this.skip();
@@ -607,4 +607,35 @@ describe('<DataGrid /> - Quick Filter', () => {
     await sleep(debounceMs * 2);
     expect(searchBox.value).to.equal('abc');
   });
+
+  // https://github.com/mui/mui-x/issues/9666
+  it('should not fail when the data changes', () => {
+    function getApplyQuickFilterFn(value: any) {
+      if (!value) {
+        return null;
+      }
+      return (params: any) => {
+        return String(params?.value).toLowerCase().includes(String(value).toLowerCase());
+      };
+    }
+
+    const { setProps } = render(
+      <TestCase
+        columns={[
+          {
+            field: 'brand',
+            getApplyQuickFilterFn,
+          },
+        ]}
+        filterModel={{
+          items: [],
+          quickFilterValues: ['adid'],
+        }}
+      />,
+    );
+
+    setProps({
+      rows: [],
+    });
+  });
 });