<p dir="auto">When adding components with events to a popover, they are rendered correctly, however no actions (clicks, hovers) are triggered.</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.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>

<p dir="auto">Similar to the example presented in the demos (<a href="https://material-ui.com/demos/popovers/" rel="nofollow">https://material-ui.com/demos/popovers/</a>),<br>
adding content (children) to MUI's popover should let their events to keep being registered like when using React-popper.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">MUI's Popover content is rendered but its children events are not registered. The popover is not clickable,  or selectable using devtools.</p>

<h2 dir="auto">Steps to Reproduce (for bugs)</h2>

<p dir="auto">In this sandbox, <a href="https://codesandbox.io/s/2p7k49z80r" rel="nofollow">https://codesandbox.io/s/2p7k49z80r</a>:</p>
<ol dir="auto">
<li>Hover the first line</li>
<li>click on the popover, nothing is logged (the issue).</li>
<li>Hover the second line</li>
<li>click on the popover,  some text is logged is printed in the console (as expected).</li>
</ol>
<h2 dir="auto">Context</h2>
<p dir="auto">I am trying to render a menu within the popover to collect some user selections, and syncing the popover mouseover events to keep it open if the user is interacting with it.</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>v1.0.0-beta.27</td>
</tr>
<tr>
<td>React</td>
<td>^15.6.2</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome  65.0.3314.0 (Official Build) canary (64-bit)</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>
<p dir="auto">The Select form component uses the Input's "isDirty()" function to determine if it should be marked as dirty, which does not mark the field as dirty if you select a blank value. The select field is using logic on this line: <a href="https://github.com/mui-org/material-ui/blob/v1-beta/src/Input/Input.js#L32">https://github.com/mui-org/material-ui/blob/v1-beta/src/Input/Input.js#L32</a> .</p>
<p dir="auto">I know that Angular's usage of "dirty" means 'has the form changed?', not "Determine if field is dirty (a.k.a. filled).", so it's confusing to see a different usage of dirty by the MaterialUI library.</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/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">I expect any field to be marked as dirty if it changed from the original values. If I loaded the page and a non-blank value was selected in the Select field, and I change it to a value that equals "", it should mark the field as dirty since it changed (regardless of what value it changed to, as long as it is different).</p>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto">If I change the Select's value to a MenuItem whose value="", it marks the field as not dirty. This is causing the label to unshrink and cover the field's displayed value. To get around this, I have to force the  property so it doesn't care about the field's dirty flag.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>

<p dir="auto">Demo of bug: <a href="https://codesandbox.io/s/l7z7on8y5m" rel="nofollow">https://codesandbox.io/s/l7z7on8y5m</a></p>
<ol dir="auto">
<li>Create a Select field with MenuItems</li>
<li>Set "displayEmpty" in select field</li>
<li>Have one MenuItem with value="" and label 'None'.</li>
<li>With an initial Select field value other than "", choose the "None" option, and watch as the InputLabel unshrinks and covers the value in the field.</li>
</ol>
<h2 dir="auto">Context</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.21</td>
</tr>
<tr>
<td>React</td>
<td>16.0.0</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome  62.0.3202.94</td>
</tr>
<tr>
<td>etc</td>
<td>Mac</td>
</tr>
</tbody>
</table>