[DataGrid] Quick filter is not working correctly on Memoized toolbar.

[woodreamz]

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/datagrid-memoized-toolbar-6y29x9?file=/demo.tsx

Steps:

1. Enter a word in the Quick Filter/Search input
2. Ctrl/Cmd + A to select the work and press Delete
3. The field is cleared and then the word reappears but the rows a filtered correctly

Current behavior 😯

When the toolbar is memoized, the quick filter/search is not working correctly. It seems to re render weirdly, sometimes you loose a characters, sometimes it does not clean the field...

function CustomToolbar() {
  return (
    <GridToolbarContainer>
      <GridToolbarQuickFilter />
      <GridToolbarColumnsButton />
      <GridToolbarFilterButton />
      <GridToolbarDensitySelector />
      <GridToolbarExport />
    </GridToolbarContainer>
  );
}

const MemoizedToolbar = React.memo(CustomToolbar);

export default function CustomToolbarGrid() {
  const { data } = useDemoData({
    dataSet: "Commodity",
    rowLength: 10,
    maxColumns: 6
  });

  return (
    <div>
      <DataGrid
        {...data}
        slots={{
          toolbar: MemoizedToolbar
        }}
      />
    </div>
  );
}

Expected behavior 🤔

It should work as a non memoized toolbar.

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

System:
    OS: macOS 13.4
  Binaries:
    Node: 18.16.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.6.7 - /usr/local/bin/npm
  Browsers:
    Chrome: 114.0.5735.106
    Edge: Not Found
    Firefox: Not Found
    Safari: 16.5
  npmPackages:
    @mui/icons-material: 5.11.16 => 5.11.16 
    @mui/lab: 5.0.0-alpha.134 => 5.0.0-alpha.134 
    @mui/material: 5.13.5 => 5.13.5 
    @mui/styled-engine-sc:  5.12.0 
    @mui/system: 5.13.5 => 5.13.5 
    @mui/x-data-grid-premium: 6.7.0 => 6.7.0 
    @mui/x-date-pickers: 6.7.0 => 6.7.0 
    @types/react: 18.2.11 => 18.2.11 
    react: 18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 
    styled-components: 5.3.11 => 5.3.11 
    typescript: 5.1.3 => 5.1.3 

Order ID or Support key 💳 (optional)

No response

[m4theushw]

The toolbar can't be memoized because the quick filter component gets its data directly from the main state, not from props passed to it, which means that the props might not have been changed but the state has. Why do you need to memoize it?

[woodreamz]

I don't really need to memoize it, I discovered this issue while testing some stuff with a custom toolbar.

That being said, memoizing the toolbar should not change the behaviour of the quick filter. As you say, if the quick filter is bound to the main state, it should be updated/rerendered correctly regardless of the memoized toolbar.

[romgrk]

Might be fixed by #9037. The QF component uses useGridSelector which will become reactive when we merge that.

[cherniavskii]

I confirm that this issue is fixed 🎉
Before: https://codesandbox.io/s/datagrid-memoized-toolbar-6y29x9?file=/demo.tsx
After: https://codesandbox.io/s/datagrid-memoized-toolbar-forked-dz6m5v?file=/demo.tsx