How to show downshift + popper on top of material-ui dialog?

Question

I've implemented an autocomplete multi-select field based on the Downshift with Popper Material-UI demo. That worked well up until I tried to reuse the component within a Material-UI Dialog. The Popper appears behind the mask of the Dialog.

I've modified the Material-UI demo as an example of this behavior: https://codesandbox.io/s/76moj1mq1.

Looking at Material-UI's old auto-complete solution, it use to use Popover instead of Popper. I tried substituting that in to see if it's z-index would be higher than that of the Dialog, but I think Popover steals focus from Downshift in a way that triggers the autocomplete to close immediately after it opens. Here's an example, again modifying Material-UI's demo https://codesandbox.io/s/wk84p1myz7.

Any ideas on how I can make either approach work?

Answer 1

Overriding z-index on the Popper to be above the 1300 that Material-UI defaults dialogs to works, but I was hoping to avoid having to do that if possible.