[Dialog] overflow property cause issue with react-select control

[futbolistua]

Versions

Material-UI: 1.0.0-alpha.19
React: 15.5.4
Browser: Chrome

In current implementation of Dialog component dialog content has next style MuiDialogContent-root-... and predefined style property overflow-y:auto

it cause issue when I use Select component from react-select

But without this property all work fine

Is it possible to fix it?

[oliviertassinari]

The overflow is here so we get a scrollbar when the content is too large. I think that it should be the default behavior. Regarding addressing that issue, here are some possible solutions that I would use:

• Overrides the style of DialogContent to disable that scrolling handling
• Do not use DialogContent and use something home made instead
• Hope that react-select portal the suggestion list at some point (as we do on the master branch)

[futbolistua]

How about Menu? In my opinion it will have the same behavior. Does it mean that I cannot use any component that have modal portal inside DialogContent ?

[oliviertassinari]

The Menu is using the portal feature. No issue on that end.

[pietrofxq]

I have a similar issue, but with the Paper inside the Dialog. It has this style applied:

overflowY: 'auto', // Fix IE11 issue, to remove at some point.

I was able to workaround by passing a className to PaperProps and duplicating the original styles and applying a overflow:visible to the new class. But it'd be nice if we could control the overflow with a prop too.

[MichalCzerwonka]

The same here, this solve a problem:
const styles = theme => ({ dialogPaper: { overflow: 'visible' } });

<Dialog PaperProps={{ className: classes.dialogPaper }}>

[nthgol]

just adding to @michaell94 what worked for me. I had both a Dialog and DialogContent, so the following worked:

const styles = theme => ({ root: { overflow: 'visible' } });

<Dialog classes={{ paperScrollPaper: classes.root }}>

<DialogContent className={classes.root}>

[PhilipeGatis]

https://react-select.com/advanced#portaling

[sanjanaHE]

not a good solution for dialogs with long forms

[MarekJavurek]

Thanks! Just adding to @nthgol . (I am on version 4.0.1) This worked for me but I had to remove <SwipeableViews ... > !

EDIT: also be sure to remove scroll={"body"} from Dialog component!

[ibsenvalath]

just adding to @michaell94 what worked for me. I had both a Dialog and DialogContent, so the following worked:

const styles = theme => ({ root: { overflow: 'visible' } });

<Dialog classes={{ paperScrollPaper: classes.root }}>

<DialogContent className={classes.root}>

That works! Thanks

[oliviertassinari]

Note that a better alternative to react-select is available at https://mui.com/material-ui/react-autocomplete/.

[dnquang1996vn]

You want to look at the menuPortalTarget prop. There's a topic on this in the Advanced documentation, specifically with a modal example provided. Something like:
<Select {...otherProps} menuPortalTarget={document.body} />
Then set index for menu portal

[woorykim]

const StyleDialog = styled(Dialog)(({ theme }) => ({
  "& .MuiPaper-root": {
    overflowY: "visible",
  },
}));

<StyleDialog open={open} onClose={handleClose}>
  <DialogContent>
    <Autocomplete      
      disablePortal
      renderInput={(params) => <TextField {...params} label={label} />}
    />
  </DialogContent>
</StyleDialog>

just adding to @ibsenvalath what worked for me. Dialog components and style features enabled the following to work:
Thanks! I just added it.