Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Respect Node.ownerDocument of anchorEl when creating portal for Menu

See original GitHub issue

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

Expected Behavior

When opening a Menu and creating a react portal, the portal that’s created should reference the Node.ownerDocument of the anchorEl or something similar, to support rendering Material-UI components in a new window (such as through a library like react-popout)

Current Behavior

The portal that is created always uses the global document object to append a portal div to. See: https://github.com/callemall/material-ui/blob/08fae8c2fcd741c01cabbee38305d5ef109acfd5/src/internal/Portal.js#L45-L55

Steps to Reproduce (for bugs)

A simple example can be seen here: https://codesandbox.io/s/v09qklqkj7. You can ignore the lack of styling and what not in the popout window, just trying to show the portal issue.

Your Environment

Tech	Version
Material-UI	1.0.0-beta.21
React	16
browser	All

Issue Analytics

State:
Created 6 years ago
Comments:11 (9 by maintainers)

Top GitHub Comments

2reactions

corytheboydcommented, Nov 25, 2017

I also ran into this same problem recently. Our project is a Chrome extension, and we render our UI inside of an iframe on the page to avoid inheriting that page’s styles, which as you could imagine, breaks the styles added by Material UI in wonderful amazing ways.

This introduced two problems:

JSS injects stylesheets into the top-level document
Material UI Portal renders into the top-level body

We were able to first the first issue by configuring JSS’s insertion point to use the iframe’s document, but the second issue is exactly what you are addressing with this PR.

I agree that rendering Material UI components into an iframe is an edge-case, but I don’t think it should be completely discounted either, as it provides a lot of power when building applications more complicated than a single page application.

0reactions

oliviertassinaricommented, Oct 20, 2018

Problem solved too 😃

capture d ecran 2018-10-20 a 16 25 39

Top Results From Across the Web

Respect Node.ownerDocument of anchorEl when creating ...

Material UI Portal renders into the top-level body. We were able to first the first issue by configuring JSS's insertion point to use...

@mui/icons-material | Yarn - Package Manager

This package provides the Google Material Icons converted to SvgIcon components. Installation. Install the package in your project directory with: // with npm...

Incident Response - Hybrid Analysis

Submit malware for free analysis with Falcon Sandbox and Hybrid Analysis technology. Hybrid Analysis develops and licenses analysis tools to fight malware.

CHANGELOG.md · Gitee 极速下载/Material-UI - Gitee.com

... [core] Create shared Next.js baseline config (#34259) @oliviertassinari; [core] In typescript-to-proptypes , respect the value pass to ...

UDN Search

... syntax js::value js::falsevalue() description js::falsevalue creates a js::value that represents the javascript value false. ... see also mxr id search for ...