Material-ui: [Autocomplete] Inside Dialog, bad rendering

[ARL64]

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

Current Behavior 😯

Wrap the Autocomplete into a Dialog, the Autocomplete component doesn't render the list of options (the popup) on the same z-index.
There is also an inline bug with the popup indicator.

Expected Behavior 🤔

Render the list of options (the popup) on the same z-index of the Dialog.

Steps to Reproduce 🕹

• Codesandbox

Your Environment 🌎

| Tech | Version |
| ----------- | ------- |
| Material-UI | 4.5.2 |
| React | 16.11 |
| Browser | Opera 63 |

Material-UI is awesome! ❤️
And the new Autocomplete component too 💯

[oliviertassinari]

@ARL64 Thanks for the report. What do you think of rendering the autocomplete's popup at the same level as the modal?:

diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
index 4c6aa5260..df3436b95 100644
--- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
+++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
@@ -75,7 +75,7 @@ export const styles = theme => ({
   },
   /* Styles applied to the popup element. */
   popup: {
-    zIndex: 1,
+    zIndex: theme.zIndex.modal,
   },
   /* Styles applied to the `Paper` component. */
   paper: {

The alternative would be to create a new z-index value for the component. I'm not sure it's needed.

[NZainchkovskiy]

I noticed same behaviour when placing autocomplete control inside drawer.
@oliviertassinari, can you suggest any workarounds while fix not releaset yet?
Thank you for your work, autocomplete is really great!

[bludnic]

I noticed same behaviour when placing autocomplete control inside drawer.
@oliviertassinari, can you suggest any workarounds while fix not releaset yet?
Thank you for your work, autocomplete is really great!

Workaround.

<Autocomplete
  options={top100Films}
  getOptionLabel={option => option.title}
  renderInput={({ InputProps, ...other }) => (
    <TextField
      {...other}
      InputProps={{
          ...InputProps,
          style: { flexWrap: 'nowrap' }
      }}
      label="Combo box"
      fullWidth
    />
  )}
/>

Removing this line should fix the issue.
https://github.com/mui-org/material-ui/blob/master/packages/material-ui-lab/src/Autocomplete/Autocomplete.js#L31

[eps1lon]

Can we solve this with stacking context? I never consciously used this but I'd hope we could leverage this instead of using the highest z-index of the theme. Otherwise we'll start a z-index war.

[ARL64]

@ARL64 Thanks for the report. What do you think of rendering the autocomplete's popup at the same level as the modal?:

Sounds good to me. This is the easy way to actually solve the issue. Except if someone wants to put the Autocomplete into a Snackbar or a Tooltip 😂

@oliviertassinari, can you suggest any workarounds while fix not releaset yet?

You can override the component when creating the MuiTheme as a workaround.

createMuiTheme({
    palette,
    overrides: {
      MuiAutocomplete: {
        popup: { zIndex: 1300 },
      },
    },
  }

Can we solve this with stacking context? I never consciously used this but I'd hope we could leverage this instead of using the highest z-index of the theme. Otherwise we'll start a z-index war.

@eps1lon You mean using child order instead of z-index ?

[oliviertassinari]

@eps1lon I don't know how we can solve it with the stacking context. The popup is portal, it ends up as the next sibling of the Modal. I think that it's why the Modal z-index (and not more) is enough (same for the Menu).

[gmzjohn]

I fixed this by creating a custom css and adding the following:

.MuiAutocomplete-popup {
    z-index: 999999 !important;
}

And then import it to your file.

[tm1000]

This same issue happens inside of a Card component.

[tm1000]

Well looks like the bad rendering is happening even in the code sandboxes:

https://codesandbox.io/s/i7j0y