[data grid] boolean headerFilter with option false does not work

[yoshegg]

Steps to reproduce

Steps:

Variant A

1. Open this link to live example: https://stackblitz.com/edit/react-ayw1zv-adisyv?file=Demo.js
2. In the leftmost column (defaultBooleanFilter) select true as filter
   • works as expected, there is an x right of the select to reset the selection
3. In the leftmost column (defaultBooleanFilter) select false as filter
   • the select jumps back to any and all rows are shown
4. In the leftmost column (defaultBooleanFilter) select false again as filter
   • the select shows false, but there is no x to reset the selection

Variant B

1. Refresh the already opened page or open this link to live example: https://stackblitz.com/edit/react-ayw1zv-adisyv?file=Demo.js
2. In the leftmost column (defaultBooleanFilter) select false as filter
   • the select shows false, but there is no x to reset the selection
3. In the leftmost column (defaultBooleanFilter) select true as filter
   • works as expected, there is an x right of the select to reset the selection
4. In the leftmost column (defaultBooleanFilter) select false as filter
   • the select jumps back to any and all rows are shown

Current behavior

cf. "Steps to reproduce" for easier traceability

Expected behavior

Clicking false or true should work correctly: Rows should be filtered by the selection and an x to reset the selection should be shown in both cases.

Context

I want to filter the rows by a boolean value.

As a workaround (or maybe hint/help to solve the problem?) I included my workaround where I use a singleSelect with "true" and "false" as option and I stringify my booleans in the rows array. For the rendering of the checkmarks and crosses to be correct, a re-conversion of the stringified booleans via JSON.parse() is necessary. In my project I'm actually using filterMode="server", so I don't need to do this conversion because the boolean is correctly added to my backend query.

Your environment

npx @mui/envinfo

  System:
    OS: macOS 14.7.1
  Binaries:
    Node: 22.8.0 - ~/.nvm/versions/node/v22.8.0/bin/node
    npm: 10.8.2 - ~/.nvm/versions/node/v22.8.0/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 131.0.6778.86
    Edge: Not Found
    Safari: 17.6
  npmPackages:
    @emotion/react: 11.13.3 => 11.13.3 
    @emotion/styled: 11.13.0 => 11.13.0 
    @mui/base:  5.0.0-beta.40 
    @mui/core-downloads-tracker:  5.16.7 
    @mui/icons-material: 6.1.5 => 6.1.5 
    @mui/joy: 5.0.0-beta.48 => 5.0.0-beta.48 
    @mui/material: 6.1.5 => 6.1.5 
    @mui/private-theming:  6.1.7 
    @mui/styled-engine:  6.1.7 
    @mui/system:  6.1.7 
    @mui/types:  7.2.19 
    @mui/utils:  5.16.6 
    @mui/x-data-grid: 7.22.0 => 7.22.0 
    @mui/x-data-grid-premium: 7.22.0 => 7.22.0 
    @mui/x-data-grid-pro:  7.22.0 
    @mui/x-date-pickers: 7.22.0 => 7.22.0 
    @mui/x-internals:  7.21.0 
    @mui/x-license:  7.21.0 
    @types/react: 18.3.12 => 18.3.12 
    react: 18.3.1 => 18.3.1 
    react-dom: 18.3.1 => 18.3.1 
    typescript:  5.6.3 

Search keywords: DataGrid headerFilter boolean
Order ID: 95669

[DomSeFutNe]

I am following this topic as we have the same problem.
We are in the process of using the MUI-X-DATA-GRID-Pro.
We are using server-side and applying the filters on the search parameters.
I realized:

1. selection of any: applies the value “false” as a boolean.
2. selection of true: applies the value “true” as a boolean value.
3. selection of false: Applies the value “true” as a Boolean value.

I hope it's a little help with troubleshooting :)

[michelengelen]

Thanks for opening an issue here @yoshegg ... I can confirm and @k-rajat19 already opened a PR to fix this.