[DataGrid] Fix header filters' issue with custom filters (#13255)

mui · May 30, 2024 · ab83d35 · ab83d35
1 parent 2a288b9
commit ab83d35
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 5 deletions.
diff --git a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx
@@ -123,8 +123,12 @@ const GridHeaderFilterCell = React.forwardRef<HTMLDivElement, GridHeaderFilterCe
     const isMenuOpen = menuOpenField === colDef.field;
 
     // TODO: Support for `isAnyOf` operator
-    const filterOperators =
-      colDef.filterOperators?.filter((operator) => operator.value !== 'isAnyOf') ?? [];
+    const filterOperators = React.useMemo(() => {
+      if (!colDef.filterOperators) {
+        return [];
+      }
+      return colDef.filterOperators.filter((operator) => operator.value !== 'isAnyOf');
+    }, [colDef.filterOperators]);
     const filterModel = useGridSelector(apiRef, gridFilterModelSelector);
     const filterableColumnsLookup = useGridSelector(apiRef, gridFilterableColumnLookupSelector);
 
@@ -136,7 +140,11 @@ const GridHeaderFilterCell = React.forwardRef<HTMLDivElement, GridHeaderFilterCe
       return filterModelItem ? !filterableColumnsLookup[filterModelItem.field] : false;
     }, [colDef.field, filterModel, filterableColumnsLookup]);
 
-    const currentOperator = filterOperators![0];
+    const currentOperator = React.useMemo(
+      () =>
+        filterOperators.find((operator) => operator.value === item.operator) ?? filterOperators![0],
+      [item.operator, filterOperators],
+    );
 
     const InputComponent =
       colDef.filterable || isFilterReadOnly ? currentOperator!.InputComponent : null;
@@ -286,10 +294,10 @@ const GridHeaderFilterCell = React.forwardRef<HTMLDivElement, GridHeaderFilterCe
 
     const classes = useUtilityClasses(ownerState as OwnerState);
 
-    const isNoInputOperator =
-      filterOperators?.find(({ value }) => item.operator === value)?.requiresFilterValue === false;
+    const isNoInputOperator = currentOperator.requiresFilterValue === false;
 
     const isApplied = Boolean(item?.value) || isNoInputOperator;
+
     const label =
       currentOperator.headerLabel ??
       apiRef.current.getLocaleText(

diff --git a/packages/x-data-grid-pro/src/tests/filtering.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/filtering.DataGridPro.test.tsx
@@ -15,6 +15,7 @@ import {
   gridExpandedSortedRowEntriesSelector,
   gridClasses,
   GridColDef,
+  getGridStringOperators,
 } from '@mui/x-data-grid-pro';
 import { createRenderer, fireEvent, screen, act, within } from '@mui/internal-test-utils';
 import { expect } from 'chai';
@@ -1057,6 +1058,46 @@ describe('<DataGridPro /> - Filter', () => {
 
       expect(getColumnHeaderCell(0, 1).textContent).to.equal('Custom Input');
     });
+
+    // See https://github.com/mui/mui-x/issues/13217
+    it('should not throw when custom filter operator is used with an initilaized value', () => {
+      expect(() => {
+        render(
+          <TestCase
+            columns={[
+              {
+                field: 'brand',
+                headerName: 'Brand',
+                filterOperators: [
+                  ...getGridStringOperators(),
+                  {
+                    value: 'looksLike',
+                    label: 'Looks Like',
+                    headerLabel: 'Looks Like',
+                    getApplyFilterFn: () => () => true,
+                    InputComponent: () => <div>Custom Input</div>,
+                  },
+                ],
+              },
+            ]}
+            initialState={{
+              filter: {
+                filterModel: {
+                  items: [
+                    {
+                      field: 'brand',
+                      operator: 'looksLike',
+                      value: 'a',
+                    },
+                  ],
+                },
+              },
+            }}
+            headerFilters
+          />,
+        );
+      }).not.toErrorDev();
+    });
   });
 
   describe('Read-only filters', () => {