when using iframes, portals mount at root of document instead of root of iframe

[vijaypemmaraju]

TL;DR I'm trying to render a Select element inside of an iframe, but when I do this, the MenuItem components inside render in completely the wrong place. Looking into the code, I noticed that the portal was actually mounting at the root of the document instead of the iframe.

• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

1. Add a <Select> with <MenuItem>s inside an iframe.
2. Click on the Select
3. MenuItem shows up in the expected location.

Current Behavior

1. Add a <Select> with <MenuItem>s inside an iframe.
2. Click on the Select
3. MenuItem shows up in the wrong location.

Steps to Reproduce (for bugs)

See above.

CodeSandbox: https://codesandbox.io/s/73nnlv78wq

Note: in the codesandbox, the iframe doesn't contain material-ui styling. This is because the jss needs to be injected into the iframe explictly, as well as <MuiThemeProvider>. This is a different, unrelated issue and so I didn't take the time to implement that here.

Context

In my app, I have an iframe in which I would like to use material-ui components. This bug is preventing me from using anything that uses portals under the hood.

I dug into the source a bit, and I have identified this as the issue: https://github.com/mui-org/material-ui/blob/v1-beta/src/internal/Portal.js#L47.

Since this uses document directly, it ends up ignoring the context of my iframe and instead attaches the portal to the parent root. It would be nice if there was some way to manipulate this, maybe through context or props.

Your Environment

Tech	Version
Material-UI	v1.0.0-beta.13
React	16.0.0
browser	chrome v62.0.3202.9

[ianschmitz]

See #9207 as I believe it is directly related.

[zlasa]

so what is the workaround here? I am running into this issue using material ui 4.