[data grid] GridToolbarQuickFilter loses focus when setting state variable

[entaildevops]

The problem in depth

I am keeping track of selected row. It works, but when a row is selected and GridToolbarQuickFilter is used, it loses focus when the currently selected row is filtered out. This leads to bad UX. How could I prevent this from happening?

Codesandbox here.

First select a row and then type something in the quick filter box to reproduce the issue.

Your environment

`npx @mui/envinfo`

System:
OS: Windows 11 10.0.26100

Binaries:
Node: 18.16.0 - C:\Program Files\nodejs\node.EXE
npm: 9.5.1 - C:\Program Files\nodejs\npm.CMD
pnpm: Not Found
Browsers:
Chrome: Not Found
Edge: Chromium (131.0.2903.99)

 Used latest Edge 

Search keywords: DataGrid GridToolbarQuickFilter

Order ID: 98745

[entaildevops]

I Just made the codesanbox public, was private by accident =)

[michelengelen]

The reason is that you need to define the CustomToolbar outside of the main component, since a rerender will also affect the custom component and therefor losing focus.

if you need the rows you can get it from the apiRef ... for components that get rendered inside the grid context and need to access it you can use useGridApiContext:

const CustomToolbar = () => {
  const apiRef = useGridApiContext();
  const rowsCount = apiRef.current?.state?.rows.totalRowCount;
  console.log('rowsCount', rowsCount);
  return (
    <GridToolbarContainer>{rowsCount ? <GridToolbarQuickFilter /> : null}</GridToolbarContainer>
  );
};

[entaildevops]

This solved my issue, thanks!

[entaildevops]

I guess im allowed to close the issue

[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

@entaildevops How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.