[data grid] unstable_headerFilters not showing correct value with controlled filterModel

[henry-young]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/musing-lake-9ltjdm?file=/Demo.tsx

Steps:

1. Add the unstable_headerFilters prop to a DataGridPro/Premium component which has a controlled filterModel
2. Type a single character into one of the header column filters (and observe)
3. Open the traditional column filter by clicking the funnel icon (and observe)

Current behavior 😯

The header filter input briefly displays the character(s) you typed, but the field is reset to "". The column displays like a filter has been enabled, with the filter menu button visible and the header filter input "X" clear button visible.
Clicking the filter menu button will show the filter correctly.

Expected behavior 🤔

The header filter input should show the correct value of the filter being applied to the column.

Context 🔦

I use a cache to remember the state of the DataGrid when navigating between pages. Most frequently the user will perform a search on the dataset using some specific criteria, investigate a specific row's detail page (on a detail view route), and then they navigate back to the table. Without maintaining the cache, they would have to set up their specific criteria again.

I am using the unstable_headerFilter in an attempt to replicate the behaviour of an old library we are deprecating since we upgraded to using DataGridPremium.

I have also noticed this behaviour doesn't appear when

Your environment 🌎

npx @mui/envinfo

  System:
    OS: macOS 13.5.2
  Binaries:
    Node: 16.18.1 - ~/.nvm/versions/node/v16.18.1/bin/node
    Yarn: 3.6.1 - ~/.nvm/versions/node/v16.18.1/bin/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v16.18.1/bin/npm
  Browsers:
    Chrome: 116.0.5845.187
    Edge: 116.0.1938.81
    Safari: 16.6
  npmPackages:
    @emotion/react:  11.10.5
    @emotion/styled:  11.10.5
    @mui/base:  5.0.0-alpha.110
    @mui/core-downloads-tracker:  5.11.0
    @mui/icons-material:  5.11.0
    @mui/lab:  5.0.0-alpha.112
    @mui/material:  5.11.0
    @mui/private-theming:  5.11.0
    @mui/styled-engine:  5.11.0
    @mui/styles:  5.11.2
    @mui/system:  5.11.0
    @mui/types:  7.2.3
    @mui/utils:  5.11.0
    @mui/x-data-grid:  6.13.0
    @mui/x-data-grid-premium:  6.13.0
    @mui/x-data-grid-pro:  6.13.0
    @mui/x-date-pickers:  5.0.11
    @mui/x-date-pickers-pro:  5.0.11
    @mui/x-license-pro:  5.17.12
    @types/react:  18.0.26
    react:  18.2.0
    react-dom:  18.2.0
    styled-components:  5.3.6
    typescript:  5.1.6

Tested in Chrome

Order ID or Support key 💳 (optional)

71984

[akullpp]

Experiencing the same issue where the experimental column header filter "eats" the input after the first debounce period. Made a GIF so you can see what I mean:

[MBilalShafi]

Hi @akullpp, thank you for reporting your concern.
The issue has already been fixed and the fix should be shipped in the next library version released (possibly today or tomorrow).