Material-ui: Autocomplete dropdown options hided by dialog.

[DaviGao]

Current Behavior:

Autocomplete dropdown options(react-select autocomplete) hided by dialog.

example:

Expected Behavior

Is there any solution ? I found same issues while some people used the old version, will i need to use the popover in the current beta version?

Version

| Tech | Version |
|--------------|---------|
| Material-UI | v1.0.0-beta.47 |
| React | v15.6.2 |
| react-select | v1.2.1 |

[DaviGao]

I find one solution: add overflowY: 'visible' on Dialog>div and DialogContent。But it seems unreliable.

[DaviGao]

@oliviertassinari is there any official solution ?

[oliviertassinari]

Portal the results.

[nthgol]

@oliviertassinari can you explain the suggestion "portal the results"?

[oliviertassinari]

@nthgol It means using the Popper component like in the demo:
https://github.com/mui-org/material-ui/blob/636db13b46f572481cfec8804c26beaf3e886e02/docs/src/pages/demos/autocomplete/IntegrationDownshift.js#L7

[nthgol]

Thanks @oliviertassinari. I tried using a popper as a parent of the Paper in a dialog, but the Popper container rendered behind the Dialog. I put it in a gist here, if you had a chance it would be great if you could point out my mistake

[oliviertassinari]

@nthgol Yeah, maybe I should have updated the react-autosuggest demo too with the Popper!

[oliviertassinari]

done

[dankremniov]

@oliviertassinari, is there any way to use Popper with react-select implementation? I am having the same issue with dialog.

[remy-poirier]

Sorry to ask this on a closed issue, but I can't make the example work, do you have an idea of what I am doing wrong, I followed the example on the official documentation, but like @nthgol , it seems that my Popper is hidden behind the Dialog, because I see the div in the DOM, but not on the screen, here is a Gist of my code : https://gist.github.com/remy-poirier/9acb4f50d70ffd8c0d49e781080e0e6a

Edit: I copy/pasted the example in a <Dialog>, and I can now confirm that the <MenuList /> that is behind the <Dialog> component, do you know how I can fix this @oliviertassinari ?

[nthgol]

I don’t know what negative implications there are but I ended up not using
a popper. I used a regular Menu component but overrode the zIndex on the
CSS to like 10000. It works fine in dialogs.

On Wed, Aug 22, 2018 at 8:36 AM Remy-Poirier [e-mail]
wrote:

Sorry to ask this on a closed issue, but I can't make the example work, do
you have an idea of what I am doing wrong, I followed the example on the
official documentation, but like @nthgol https://github.com/nthgol , it
seems that my Popper is hidden behind the Dialog, because I see the div in
the DOM, but not on the screen, here is a Gist of my code :
https://gist.github.com/remy-poirier/9acb4f50d70ffd8c0d49e781080e0e6a

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/mui-org/material-ui/issues/11824#issuecomment-415016513,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AZMm3u-G6oKV9bmwPepceXCKTU-h9dKQks5uTVBjgaJpZM4UjwP3
.

[remy-poirier]

Ok thank you for your comment. For the moment I managed to make it work by setting zIndex: 1400 on the Popper component (zIndex of Dialog is at 1300), but it's still tricky.

[charlax]

Same here, I just used a higher z-index directly on the Popper component.

import { makeStyles } from '@material-ui/styles';

const useStyles = makeStyles(theme => ({
  zIndex: {
    zIndex: theme.zIndex.modal + 200,
  },
}));

              <Popper
                open={isOpen}
                anchorEl={popperNode}
                placement="bottom-start"
                className={classes.zIndex}
              >