Multiselect within DataGrid cell

[jamintz]

Order ID 💳

21172

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

I'm trying to implement a multi-select within a DataGrid column. Following the advice here I implemented it using Autocomplete. Functionally it pretty much works, but I'm looking for some suggestions or help on styling.

The problem in depth 🔍

Specifically, it looks OK when only one or two items are selected:

However, when a bunch are added the select arrow drops further and further down and everything's trapped within the cell – no way to scroll lower etc. Changing the cell width allows more to be displayed at a time but I'm looking for a more general solution, that would hit a limit as well.

Reproduction here: https://codesandbox.io/s/renderratingeditcellgrid-material-demo-forked-te5iw?file=/demo.js

Context 🔦

It'd be useful to have a nice looking multi-select

Your environment 🌎

"@mui/icons-material": "^5.0.4",
"@mui/lab": "^5.0.0-alpha.51",
"@mui/material": "^5.0.4",
"@mui/styles": "^5.0.1",
"@mui/x-data-grid-generator": "^5.0.0-beta.4",
"@mui/x-data-grid-pro": "^5.0.0-beta.4",

[m4theushw]

You have to use a Portal to allow the Autocomplete to exceed the cell boundaries. In #2851 (comment) I showed how to create a textarea-like component with this capability. The approach is the same here.

[jamintz]

Perfect, thanks