<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.</li>
</ul>
<p dir="auto">I have found a very similar issue: <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="232488121" data-permission-text="Title is private" data-url="https://github.com/mui/material-ui/issues/7012" data-hovercard-type="issue" data-hovercard-url="/mui/material-ui/issues/7012/hovercard" href="https://github.com/mui/material-ui/issues/7012">#7012</a> but that talks about the handler being detached AFTER closing popover. Our popovers do not even open, yet they hook into the onScroll event.</p>
<h2 dir="auto">Expected Behavior</h2>

<p dir="auto">I expect Popover to not touch scroll events until it is actually on screen.</p>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto">Every Popover element (including the ones in IconMenu) hooks into the onScroll event. If there are many of these present, the handling of the scroll events is impacted.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<ol dir="auto">
<li>Go to <a href="http://www.material-ui.com/#/components/card" rel="nofollow">http://www.material-ui.com/#/components/card</a></li>
<li>Check Chrome's Dev Tools &gt; Elements &gt; Event Listeners &gt; scroll<br>
You will see there is one scroll listener<br>
This is your baseline</li>
<li>Now click on the Popover menu item to see the example Popover page</li>
<li>Check Chrome's Dev Tools &gt; Elements &gt; Event Listeners &gt; scroll<br>
You will see FOUR listeners.<br>
One listener was registered for each Popover on the screen, even though they are not visible at the moment</li>
</ol>
<p dir="auto">This means Popovers are registering even if they are not active at all.</p>
<h2 dir="auto">Context</h2>
<p dir="auto">We are (ab)using Popovers in our app, using hundreds/thousands of IconMenu elements within a table. Each of these contains a Popover and each Popover hooks into onScroll. This leads to bad performance when the table size grows.</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>0.19.4</td>
</tr>
<tr>
<td>React</td>
<td>15.6.2</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome  63.0.3239.84</td>
</tr>
</tbody>
</table>
<p dir="auto">When using a Select inside a Dialog i get the error "Uncaught RangeError: Maximum call stack size exceeded." after clicking into the select box.<br>
The error came from <a href="https://github.com/callemall/material-ui/blob/v1-beta/src/internal/Modal.js#L270">here</a>.<br>
Note: I'm using redux-form with redux-form-material-ui, but I don't think that they are related, expected for the fact that redux-form-material-ui is using beta 16 of material-ui for the Select component</p>
<ul dir="auto">
<li>[X ] 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">To not throw errors</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">Errors in console</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<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.17</td>
</tr>
<tr>
<td>React</td>
<td>15.6.1</td>
</tr>
<tr>
<td>redux-form-material-ui</td>
<td>5.0.0-beta1</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome 61</td>
</tr>
</tbody>
</table>