[DataGrid] Fix filters with empty array value not being removed from …

…the filter model (#8501)
mui · Apr 4, 2023 · a24a167 · a24a167
1 parent 7873522
commit a24a167
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 0 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
@@ -169,6 +169,11 @@ export const useGridFilter = (
         const filterModel = gridFilterModelSelector(apiRef);
         const filterItemsWithValue = filterModel.items.filter((item) => {
           if (item.value !== undefined) {
+            // Some filters like `isAnyOf` support array as `item.value`.
+            // If array is empty, we want to remove it from the filter model.
+            if (Array.isArray(item.value) && item.value.length === 0) {
+              return false;
+            }
             return true;
           }
 

diff --git a/packages/grid/x-data-grid/src/tests/filterPanel.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/filterPanel.DataGrid.test.tsx
@@ -514,4 +514,33 @@ describe('<DataGrid /> - Filter panel', () => {
       'isEmpty',
     );
   });
+
+  // See https://github.com/mui/mui-x/issues/7901#issuecomment-1427058922
+  it('should remove `isAnyOf` filter from the model when filter panel is opened through column menu', () => {
+    render(
+      <TestCase
+        initialState={{
+          filter: {
+            filterModel: {
+              items: [{ field: 'country', operator: 'isAnyOf', value: [] }],
+            },
+          },
+        }}
+      />,
+    );
+
+    // open filter panel
+    const columnCell = getColumnHeaderCell(3);
+    const menuIconButton = columnCell.querySelector('button[aria-label="Menu"]')!;
+    fireEvent.click(menuIconButton);
+    fireEvent.click(screen.getByRole('menuitem', { name: 'Filter' }));
+
+    // check that the filter is changed to default one (`is`)
+    expect(screen.getByRole<HTMLSelectElement>('combobox', { name: 'Columns' }).value).to.equal(
+      'country',
+    );
+    expect(screen.getByRole<HTMLSelectElement>('combobox', { name: 'Operator' }).value).to.equal(
+      'is',
+    );
+  });
 });