[data grid] singleSelect cell stays in edit mode after selection

[sydneyjodon-wk]

The problem in depth

Hello! 👋

I have some questions about why the singleSelect cell type does not exit edit mode when the user selects an option:

See the gif below (sandbox demo):

• Current default behavior (on the left): The cell stays in edit mode after an option is selected so then you have to click out of the cell to get it to leave edit mode.

• Desired behavior (on the right): The cell exits edit mode after an option is selected.

It seems like the only way to get the desired behavior is to build the edit cell yourself using renderEditCell and call apiRef.current.stopCellEditMode.

I have a couple questions:

• Why does the default behavior not exit edit mode when a selection is made? It seems like it would be nice to prevent the additional click. (also I found this functionality in the columns in the docs that use renderEditCell - ex see the status column here)
• Is the desired behavior something that could be built into the singleSelect column type? Or is there some other way to achieve this behavior without having to re-build the Select in renderEditCell?

Your environment

Here is a sandbox link: https://stackblitz.com/edit/react-cqqred?file=Demo.tsx

Thank you!

Search keywords: singleSelect, renderEditCell, edit mode
Order ID: 82849

[michelengelen]

@sydneyjodon-wk thanks for raising this issue.
I will add this to our board for the team to discuss if this is intended behaviour or if wwe could implement the dropdown closing when a selection is done.

For now your proposed way (custom renderEditCell)is the only possible one, afaik.