[Autocomplete] dropdown appears in the background opened inside a Dialog

[aquibbaig]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

The dropdown is not shown on clicking the "Add Labels" button.

Expected Behavior 🤔

The popper should be opened and we would be able to see the content inside it i.e. the "Autocomplete" component.

Steps to Reproduce 🕹

I have added a sandbox for the above mentioned steps. Kindly have a look into it.
https://codesandbox.io/s/blissful-dewdney-utnpv

Context 🔦

I have a use case where I need to open up the autocomplete API on top of a Dialog component, however the dropdown never seems to appear. I debugged the following issue and I found that when I click on the "add labels" option it sets the "anchorEl" as it should do, thanks to the "handleClick" function, but immediately after that the "onClose" prop of "Autocomplete" component gets fired which sets the "anchorEl" back to null. Therefore the dropdown never seems to appear. Again on digging deeper, I logged the "reason" variable provided to "handleClose" which shows an event "blur" when I click on the element to display the dropdown.

Your Environment 🌎

Tech	Version
Material-UI	v4.9.7
React	16.13.1
Browser	Firefox
TypeScript	3.6.4
etc.

[oliviertassinari]

@aquibbaig We don't provide support on complicated demos, please simplify the problem down to its root cause.

[oliviertassinari]

Also, it should be reproducible with v5.0.0-alpha, not v4.

[aquibbaig]

@oliviertassinari The autocomplete component doesn't work inside a Dialog.

[oliviertassinari]

@aquibbaig Please provide a minimal reproduction, in this case, with the latest version v5.0.0.alpha.5, it would help a lot.

[aquibbaig]

@oliviertassinari Thanks for your time. I have reproduced the issue again with some more examples in codesandbox.

Steps to reproduce the issue:

1. Use a simple Dialog component or a Modal component.
2. In the DialogContent of the above dialog define the Github's picker autocomplete from the material-ui documentation here or pass it as a child component to the Modal.

Observation

The dropdown doesn't appear on click.

---

[aquibbaig]

How inherently can one be so wrong? That's how development story goes anyways. So, I had some deep debug on the issue. I came to notice that the dropdown indeed appears on the page but below the dialog somehow.

Some instances can be seen here:

Any alternative to fix this issue? I've tried z-index which doesn't work.