[data grid] Header Filters empty / no UI once isEmpty or isNotEmpty is selected

[brandoningli]

Steps to reproduce

Link to live example (Documentation site)

Steps:

1. Find the first DataGrid on the example page, in which you can change the header filter to Is Empty
2. For any column, select either Is Empty or Is Not Empty

Current behavior

The header filter is blank. There is no UI element.

Expected behavior

A UI element is rendered to allow the user to switch to another filter or no filter at all.

Context

We disabled the main filter panel as our users in particular found it a bit complicated and solely using header filters worked better with our UX. This means that when they select Is Empty or Is Not Empty, they now cannot remove or change that filter unless they refresh the page.

Your environment

Using Firefox 130.0

npx @mui/envinfo

System:
    OS: macOS 14.6.1
  Binaries:
    Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
    npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 128.0.6613.114
    Edge: Not Found
    Safari: 17.6
  npmPackages:
    @emotion/react: ^11.10.0 => 11.13.0 
    @emotion/styled: ^11.10.0 => 11.13.0 
    @mui/base: ^5.0.0-beta.23 => 5.0.0-beta.40 
    @mui/core-downloads-tracker:  5.16.6 
    @mui/icons-material: ^5.8.4 => 5.16.6 
    @mui/lab: ^5.0.0-alpha.114 => 5.0.0-alpha.173 
    @mui/material: ^5.9.2 => 5.16.6 
    @mui/private-theming:  5.16.6 
    @mui/styled-engine:  5.16.6 
    @mui/system:  5.16.6 
    @mui/types:  7.2.15 
    @mui/utils:  5.16.6 
    @mui/x-data-grid:  7.12.0 
    @mui/x-data-grid-pro: ^7.1.1 => 7.12.0 
    @mui/x-date-pickers:  7.12.0 
    @mui/x-date-pickers-pro: ^7.1.1 => 7.12.0 
    @mui/x-internals:  7.12.0 
    @mui/x-license:  7.12.0 
    @types/react: ^18.2.45 => 18.3.3 
    react: ^18.2.0 => 18.3.1 
    react-dom: ^18.2.0 => 18.3.1 
    styled-components:  6.1.12 
    typescript: ^5.3.3 => 5.5.4 

Search keywords: header filter isEmpty
Order ID: 75000

[k-rajat19]

Thanks for your feedback.
This happens because the isEmpty and isNotEmpty values in the filter operator have no Input Component.
this behavior is for better UX but in your case, it seems like a problem because you have disabled the main filter panel.
we should probably disable the input component for these values instead of not rendering it.

[brandoningli]

I was just able to patch this into my codebase to test it out, and those improvements are exactly what the doctor ordered!

[MBilalShafi]

I think it's a regression as it used to work in v6: https://v6.mui.com/x/react-data-grid/filtering/header-filters/

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

We value your feedback @brandoningli! How was your experience with our support team?
If you could spare a moment, we'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!