[DataGridPro] Fix header filtering with boolean column type (#15528)

mui · Nov 27, 2024 · fe3104e · fe3104e
1 parent 72d000d
commit fe3104e
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 2 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
@@ -167,7 +167,7 @@ const GridHeaderFilterCell = React.forwardRef<HTMLDivElement, GridHeaderFilterCe
 
     const applyFilterChanges = React.useCallback(
       (updatedItem: GridFilterItem) => {
-        if (item.value && !updatedItem.value) {
+        if (item.value && updatedItem.value === undefined) {
           apiRef.current.deleteFilterItem(updatedItem);
           return;
         }
@@ -314,7 +314,7 @@ const GridHeaderFilterCell = React.forwardRef<HTMLDivElement, GridHeaderFilterCe
 
     const isNoInputOperator = currentOperator.requiresFilterValue === false;
 
-    const isApplied = Boolean(item?.value) || isNoInputOperator;
+    const isApplied = item?.value !== undefined || isNoInputOperator;
 
     const label =
       currentOperator.headerLabel ??

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
@@ -16,6 +16,7 @@ import {
   gridClasses,
   GridColDef,
   getGridStringOperators,
+  GridFilterItem,
 } from '@mui/x-data-grid-pro';
 import { createRenderer, fireEvent, screen, act, within } from '@mui/internal-test-utils';
 import { expect } from 'chai';
@@ -1118,6 +1119,74 @@ describe('<DataGridPro /> - Filter', () => {
         );
       }).not.toErrorDev();
     });
+
+    it('should work correctly with boolean column type', () => {
+      const getRows = (item: Omit<GridFilterItem, 'field'>) => {
+        const { unmount } = render(
+          <TestCase
+            filterModel={{
+              items: [{ field: 'isPublished', ...item }],
+            }}
+            rows={[
+              {
+                id: 0,
+                isPublished: undefined,
+              },
+              {
+                id: 1,
+                isPublished: null,
+              },
+              {
+                id: 2,
+                isPublished: true,
+              },
+              {
+                id: 3,
+                isPublished: false,
+              },
+            ]}
+            columns={[
+              {
+                field: 'isPublished',
+                type: 'boolean',
+                // The boolean cell does not handle the formatted value, so we override it
+                renderCell: (params) => {
+                  const value = params.value as boolean | null | undefined;
+
+                  if (value === null) {
+                    return 'null';
+                  }
+
+                  if (value === undefined) {
+                    return 'undefined';
+                  }
+
+                  return value.toString();
+                },
+              },
+            ]}
+            headerFilters
+          />,
+        );
+        const values = getColumnValues(0);
+        unmount();
+        return values;
+      };
+      const ALL_ROWS = ['undefined', 'null', 'true', 'false'];
+      const TRUTHY_ROWS = ['true'];
+      const FALSY_ROWS = ['undefined', 'null', 'false'];
+
+      expect(getRows({ operator: 'is', value: 'true' })).to.deep.equal(TRUTHY_ROWS);
+      expect(getRows({ operator: 'is', value: true })).to.deep.equal(TRUTHY_ROWS);
+
+      expect(getRows({ operator: 'is', value: 'false' })).to.deep.equal(FALSY_ROWS);
+      expect(getRows({ operator: 'is', value: false })).to.deep.equal(FALSY_ROWS);
+
+      expect(getRows({ operator: 'is', value: '' })).to.deep.equal(ALL_ROWS);
+      expect(getRows({ operator: 'is', value: undefined })).to.deep.equal(ALL_ROWS);
+      expect(getRows({ operator: 'is', value: null })).to.deep.equal(ALL_ROWS);
+      expect(getRows({ operator: 'is', value: 'test' })).to.deep.equal(ALL_ROWS); // Ignores invalid values
+    });
   });
 
   describe('Read-only filters', () => {

diff --git a/packages/x-data-grid/src/tests/filtering.DataGrid.test.tsx b/packages/x-data-grid/src/tests/filtering.DataGrid.test.tsx
@@ -1127,6 +1127,7 @@ describe('<DataGrid /> - Filter', () => {
 
       expect(getRows({ operator: 'is', value: '' })).to.deep.equal(ALL_ROWS);
       expect(getRows({ operator: 'is', value: undefined })).to.deep.equal(ALL_ROWS);
+      expect(getRows({ operator: 'is', value: null })).to.deep.equal(ALL_ROWS);
       expect(getRows({ operator: 'is', value: 'test' })).to.deep.equal(ALL_ROWS); // Ignores invalid values
     });
   });