[DataGrid] Multi-select in custom toolbar closes after choosing one item

[mtr1990]

[DataGrid] Multi-select in custom toolbar closes after choosing one item

[michelengelen]

Hey @mtr1990
This is not a bug in the data grid, but rather an implementation issue.

When selecting an item inside from the MultiSelect it will cause a state change and therefore a re-render of the grid. You can prevent that by moving the state handling inside of the MultiSelect component.

When you provide that to the toolbar slot it does not re-render the whole grid with every change. This is also way more efficient.

Here is your example, but with an altered way of rendering the MultiSelect: Multi-Select example

I guess you will need the values set in the MultiSelect for the grid, so you could then pass the values back when closing/bluring the MultiSelect, or provide it through a global state management, etc.

I hope this helps! If not please feel free to ask! 💪🏼

[mtr1990]

Hi @michelengelen ,

Thanks for responding and providing a solution.

My aim is to get the values ​​from MultiSelect and use this to filter data from the grid.

However, I don't know how to get these values ​​exactly with the desired behavior of selecting multiple items in one go.

The global state appears ready to do this. But it wouldn't be suitable in my case. Do you have any other ideas or solutions?

https://codesandbox.io/p/sandbox/datagrid-forked-spsjsc?file=%2Fsrc%2FApp.tsx%3A61%2C8

[michelengelen]

Hey @mtr1990

So, when you need the values set in the MultiSelect component you can just pass a handler into the component that gets called in the onClose or onBlur method.

Here is a working example, logging the selected names in the console when the select closes.

This is where you can then update the filtering with the apiRef from the datagrid.
Let me know if you need more help with this.

Thanks! 🙇🏼

[mtr1990]

Hi,

I think this is a limitation. The expected behavior is that the values ​​change on the select event (onChange) instead of onClose oronBlur.

However I am satisfied with this solution. Thank you for your help!