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 ***@***.***> 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 <#11824 (comment)>, 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}
              >