From fe3104ed0753e7ef015974e6c1c83969de3c5c44 Mon Sep 17 00:00:00 2001
From: Rajat <rd.rajat23@gmail.com>
Date: Thu, 28 Nov 2024 00:31:15 +0530
Subject: [PATCH] [DataGridPro] Fix header filtering with `boolean` column type
 (#15528)

---
 .../headerFiltering/GridHeaderFilterCell.tsx  |  4 +-
 .../src/tests/filtering.DataGridPro.test.tsx  | 69 +++++++++++++++++++
 .../src/tests/filtering.DataGrid.test.tsx     |  1 +
 3 files changed, 72 insertions(+), 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
index 6c19ae5f9b37..bd8aca4630ed 100644
--- 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
index 0f52a5973d60..be6c832a2d93 100644
--- 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
index 6aff1383998a..5e333fd3765b 100644
--- 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
     });
   });