<p dir="auto">Pop over on ios safari doesn’t disallow scrolling and this change the intended behavior if someone scrolls down while pop up is on</p>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">popover to be removed before scrolling is allowed</p>
<h2 dir="auto">Behavior</h2>
<p dir="auto">If you scroll on ios safari browser while popover is on the popover doesn’t disappear</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto">use any demo app with popover you can check it on the demo page</p>
<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/mui-org/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate. (keywords searched: <code class="notranslate">hot</code> <code class="notranslate">load</code> <code class="notranslate">muiFormControl</code> <code class="notranslate">Input</code>)</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">When using <code class="notranslate">react-hot-loader</code> in an application with MUI form controls, such as <code class="notranslate">TextField</code>, I expect that making a change to my source code will trigger a successful hot reload.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">Making a change to my source code works fine until i add a <code class="notranslate">TextField</code> to my component.<br>
Once there's a <code class="notranslate">TextField</code> visible, any changes that trigger a hot reload will cause the page to fail to hot-reload, showing errors in the console:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Uncaught TypeError: Cannot read property 'muiFormControl' of undefined
    at formControlState (Input.js:264)
    at ProxyComponent.componentWillUpdate (Input.js:372)
    at next (hotReplacementRender.js:204)
    at hotReplacementRender.js:229
    at Array.forEach (&lt;anonymous&gt;)
    at hotReplacementRender (hotReplacementRender.js:191)
    at next (hotReplacementRender.js:207)
    at hotReplacementRender.js:229
    at Array.forEach (&lt;anonymous&gt;)
    at hotReplacementRender (hotReplacementRender.js:191)
    at next (hotReplacementRender.js:207)
    at hotReplacementRender.js:216
    at Array.forEach (&lt;anonymous&gt;)
    at hotReplacementRender (hotReplacementRender.js:191)
    at next (hotReplacementRender.js:207)
    at hotReplacementRender.js:229
    at Array.forEach (&lt;anonymous&gt;)
    at hotReplacementRender (hotReplacementRender.js:191)
    at next (hotReplacementRender.js:207)
    at hotReplacementRender.js:229
    at Array.forEach (&lt;anonymous&gt;)
    at hotReplacementRender (hotReplacementRender.js:191)
    at next (hotReplacementRender.js:207)
    at hotReplacementRender.js:229
    at Array.forEach (&lt;anonymous&gt;)
    at hotReplacementRender (hotReplacementRender.js:191)
    at next (hotReplacementRender.js:207)
    at hotReplacementRender.js:216
    at Array.forEach (&lt;anonymous&gt;)
    at hotReplacementRender (hotReplacementRender.js:191)
    at next (hotReplacementRender.js:207)
    at hotReplacementRender.js:229
    at Array.forEach (&lt;anonymous&gt;)
    at hotReplacementRender (hotReplacementRender.js:191)
    at next (hotReplacementRender.js:207)
    at hotReplacementRender.js:229
    at Array.forEach (&lt;anonymous&gt;)
    at hotReplacementRender (hotReplacementRender.js:191)
    at next (hotReplacementRender.js:207)
    at hotReplacementRender.js:229
    at Array.forEach (&lt;anonymous&gt;)
    at hotReplacementRender (hotReplacementRender.js:191)
    at next (hotReplacementRender.js:207)
    at hotReplacementRender.js:216
    at Array.forEach (&lt;anonymous&gt;)
    at hotReplacementRender (hotReplacementRender.js:191)
    at next (hotReplacementRender.js:207)
    at hotReplacementRender.js:229
    at Array.forEach (&lt;anonymous&gt;)
    at hotReplacementRender (hotReplacementRender.js:191)
index.js:2177 The above error occurred in the &lt;AppContainer&gt; component:
    in AppContainer (created by HotExportedWithStyles(Component))
    in HotExportedWithStyles(Component)
    in Router (created by ConnectedRouter)
    in ConnectedRouter
    in Provider (at index.js:20)
    in MuiThemeProvider (at index.js:19)"><pre class="notranslate"><code class="notranslate">Uncaught TypeError: Cannot read property 'muiFormControl' of undefined
    at formControlState (Input.js:264)
    at ProxyComponent.componentWillUpdate (Input.js:372)
    at next (hotReplacementRender.js:204)
    at hotReplacementRender.js:229
    at Array.forEach (&lt;anonymous&gt;)
    at hotReplacementRender (hotReplacementRender.js:191)
    at next (hotReplacementRender.js:207)
    at hotReplacementRender.js:229
    at Array.forEach (&lt;anonymous&gt;)
    at hotReplacementRender (hotReplacementRender.js:191)
    at next (hotReplacementRender.js:207)
    at hotReplacementRender.js:216
    at Array.forEach (&lt;anonymous&gt;)
    at hotReplacementRender (hotReplacementRender.js:191)
    at next (hotReplacementRender.js:207)
    at hotReplacementRender.js:229
    at Array.forEach (&lt;anonymous&gt;)
    at hotReplacementRender (hotReplacementRender.js:191)
    at next (hotReplacementRender.js:207)
    at hotReplacementRender.js:229
    at Array.forEach (&lt;anonymous&gt;)
    at hotReplacementRender (hotReplacementRender.js:191)
    at next (hotReplacementRender.js:207)
    at hotReplacementRender.js:229
    at Array.forEach (&lt;anonymous&gt;)
    at hotReplacementRender (hotReplacementRender.js:191)
    at next (hotReplacementRender.js:207)
    at hotReplacementRender.js:216
    at Array.forEach (&lt;anonymous&gt;)
    at hotReplacementRender (hotReplacementRender.js:191)
    at next (hotReplacementRender.js:207)
    at hotReplacementRender.js:229
    at Array.forEach (&lt;anonymous&gt;)
    at hotReplacementRender (hotReplacementRender.js:191)
    at next (hotReplacementRender.js:207)
    at hotReplacementRender.js:229
    at Array.forEach (&lt;anonymous&gt;)
    at hotReplacementRender (hotReplacementRender.js:191)
    at next (hotReplacementRender.js:207)
    at hotReplacementRender.js:229
    at Array.forEach (&lt;anonymous&gt;)
    at hotReplacementRender (hotReplacementRender.js:191)
    at next (hotReplacementRender.js:207)
    at hotReplacementRender.js:216
    at Array.forEach (&lt;anonymous&gt;)
    at hotReplacementRender (hotReplacementRender.js:191)
    at next (hotReplacementRender.js:207)
    at hotReplacementRender.js:229
    at Array.forEach (&lt;anonymous&gt;)
    at hotReplacementRender (hotReplacementRender.js:191)
index.js:2177 The above error occurred in the &lt;AppContainer&gt; component:
    in AppContainer (created by HotExportedWithStyles(Component))
    in HotExportedWithStyles(Component)
    in Router (created by ConnectedRouter)
    in ConnectedRouter
    in Provider (at index.js:20)
    in MuiThemeProvider (at index.js:19)
</code></pre></div>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto">could not get codesandbox to work with hot loader so including zipped client app.</p>
<p dir="auto"><a href="https://github.com/mui-org/material-ui/files/1650417/ClientApp.zip">ClientApp.zip</a></p>
<ol dir="auto">
<li><code class="notranslate">yarn install</code></li>
<li><code class="notranslate">yarn start</code></li>
<li>click on <code class="notranslate">New List</code> at top right (drawer should open)</li>
<li>make a change to JSS somewhere in a component (<code class="notranslate">IssueListEditor.js</code> for example)</li>
<li>watch react try to reload and page go blank, then observe errors in console.</li>
</ol>
<p dir="auto">Repeat the whole process after commenting out the <code class="notranslate">&lt;TextField/&gt;</code> on line 109 of <code class="notranslate">IssueListEditor.js</code>.</p>
<p dir="auto">You should not be able to repro the broken hot-load without it.</p>
<h2 dir="auto">Context</h2>
<p dir="auto">react hot loading is a basic part of the dev workflow for me personally and at my company. we also love material-ui's look-and-feel, flexibility, and customizability. But not being able to hot-reload when there are form fields in the app is a major problem for development.</p>
<h2 dir="auto">Your Environment</h2>
<p dir="auto">osx</p>
<p dir="auto">yarn: 1.2.3<br>
node: 8.9.3<br>
npm: 4.6.1<br>
react-scripts: 1.0.17<br>
react-hot-loader: 4.0.0-beta.14</p>
<p dir="auto"><a href="https://github.com/mui-org/material-ui/files/1650418/package.json.zip">package.json.zip</a></p>
<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>1.0.0-beta.30</td>
</tr>
<tr>
<td>React</td>
<td>16.2.0</td>
</tr>
<tr>
<td>browser</td>
<td>chrome latest</td>
</tr>
</tbody>
</table>