<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/callemall/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">When opening a Menu and creating a react portal, the portal that's created should reference the <code class="notranslate">Node.ownerDocument</code> of the <code class="notranslate">anchorEl</code> or something similar, to support rendering Material-UI components in a new window (such as through a library like <a href="https://github.com/JakeGinnivan/react-popout">react-popout</a>)</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">The portal that is created always uses the global <code class="notranslate">document</code> object to append a portal div to. See: <a href="https://github.com/callemall/material-ui/blob/08fae8c2fcd741c01cabbee38305d5ef109acfd5/src/internal/Portal.js#L45-L55">https://github.com/callemall/material-ui/blob/08fae8c2fcd741c01cabbee38305d5ef109acfd5/src/internal/Portal.js#L45-L55</a></p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto">A simple example can be seen here: <a href="https://codesandbox.io/s/v09qklqkj7" rel="nofollow">https://codesandbox.io/s/v09qklqkj7</a>. You can ignore the lack of styling and what not in the popout window, just trying to show the portal issue.</p>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>1.0.0-beta.21</td>
</tr>
<tr>
<td>React</td>
<td>16</td>
</tr>
<tr>
<td>browser</td>
<td>All</td>
</tr>
</tbody>
</table>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/callemall/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.
<ul dir="auto">
<li>Possibly related issue: <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="260046862" data-permission-text="Title is private" data-url="https://github.com/mui/material-ui/issues/8353" data-hovercard-type="issue" data-hovercard-url="/mui/material-ui/issues/8353/hovercard" href="https://github.com/mui/material-ui/issues/8353">#8353</a></li>
</ul>
</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<ol dir="auto">
<li>Make change to file</li>
<li>Save file</li>
<li>React hot loader renders change without erorrs and keeps state</li>
</ol>
<h2 dir="auto">Current Behavior</h2>
<ol dir="auto">
<li>Make change to file</li>
<li>Save file</li>
<li>React hot loader throws error "React Hot Loader: this component is not accepted by Hot Loader."</li>
<li>Page reloads (no saved state)</li>
<li>Renders change</li>
</ol>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/1885333/31930515-5ef58e28-b876-11e7-974d-06960596571f.png"><img src="https://user-images.githubusercontent.com/1885333/31930515-5ef58e28-b876-11e7-974d-06960596571f.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/1885333/31930531-6d5876ce-b876-11e7-856f-08dab9ee4bcc.png"><img src="https://user-images.githubusercontent.com/1885333/31930531-6d5876ce-b876-11e7-856f-08dab9ee4bcc.png" alt="image" style="max-width: 100%;"></a></p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>

<p dir="auto">Use <a href="https://github.com/Glavin001/react-hot-ts/tree/material-ui-demo">https://github.com/Glavin001/react-hot-ts/tree/material-ui-demo</a> to reproduce with the above steps.</p>
<h2 dir="auto">Context</h2>
    
<p dir="auto">I loose usage of React Hot Loader when adding Material UI to my project.</p>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>1.0.0-beta.18</td>
</tr>
<tr>
<td>React</td>
<td>16.0.0</td>
</tr>
<tr>
<td>React DOM</td>
<td>16.0.0</td>
</tr>
</tbody>
</table>