Render the listbox with a portal

[phiter]

Describe the solution you'd like

Material UI renders its dropdown's listbox somewhere else in the page using a portal. This makes it possible to use the dropdown inside dialogs with it being able to overflow the dialog.

Example:

Currently in react-tag-autocomplete, this isn't possible, so if you use the component inside a dialog, it doesn't overflow properly.

In our application, the dropdown doesn't go over the dialog's footer, because the dialog's body has overflow: auto.

Using a portal to render the dropdown near the root element should allow this behavior.

[phiter]

By the way, if this is implemented: #19, we can probably manage the positioning of the listbox ourselves and put it in a portal. The way it is right now it's impossible to do.

[i-like-robots]

Thanks for the suggestion @phiter, this isn't something I'd considered. Utilising a portal for these cases makes sense.

Adding a custom renderer for the list box would be very straightforward and I believe would enable this. Would you be interested in contributing this change?

I would like to implement #19 in future but it's not currently on the horizon.