<h2 dir="auto">Problem Description</h2>
<p dir="auto">Dropdown component causing dom change error in hot reload. When the basic Dropdown is rendered we get the following hot reloading error:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Uncaught Invariant Violation: findComponentRoot(..., .0.1.1.1.2.1.$1/=11.0.2.1.0.$2016-03-07T13=208=201-05=2001.1:$37.3.0.1.0): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a &lt;tbody&gt; when using tables, nesting tags like &lt;form&gt;, &lt;p&gt;, or &lt;a&gt;, or using non-SVG elements in an &lt;svg&gt; parent. Try inspecting the child nodes of the element with React ID ``."><pre class="notranslate"><code class="notranslate">Uncaught Invariant Violation: findComponentRoot(..., .0.1.1.1.2.1.$1/=11.0.2.1.0.$2016-03-07T13=208=201-05=2001.1:$37.3.0.1.0): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a &lt;tbody&gt; when using tables, nesting tags like &lt;form&gt;, &lt;p&gt;, or &lt;a&gt;, or using non-SVG elements in an &lt;svg&gt; parent. Try inspecting the child nodes of the element with React ID ``.
</code></pre></div>
<p dir="auto">This is usually a result of bad formed HTML. We checked all components and only the Dropdown is causing this problem.</p>
<h2 dir="auto">Versions</h2>

<ul dir="auto">
<li>Material-UI: 15 alpha 1</li>
<li>React: 14.7</li>
<li>Browser: Chrome / Firefox</li>
<li>Webpack: 1.12.12</li>
<li>Webpack dev server 1.14.1</li>
<li>react-hot-loader: 1.3.0</li>
</ul>
<p dir="auto">I have a universal app with HMR in development. I noticed something very strange when using an <code class="notranslate">&lt;IconMenu /&gt;</code>.</p>
<p dir="auto">My code:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;IconMenu
  iconButtonElement={ &lt;IconButton&gt;&lt;MoreVertIcon color=&quot;#fff&quot; /&gt;&lt;/IconButton&gt; }
  targetOrigin={ { horizontal: 'right', vertical: 'top' } }
  anchorOrigin={ { horizontal: 'right', vertical: 'top' } }
&gt;
  &lt;MenuItem
    primaryText=&quot;Logout&quot;
    onClick={ () =&gt; actions.logout() }
  /&gt;
&lt;/IconMenu&gt;"><pre class="notranslate"><span class="pl-c1">&lt;</span><span class="pl-ent">IconMenu</span>
  <span class="pl-c1">iconButtonElement</span><span class="pl-c1">=</span><span class="pl-kos">{</span> <span class="pl-c1">&lt;</span><span class="pl-ent">IconButton</span><span class="pl-c1">&gt;</span><span class="pl-c1">&lt;</span><span class="pl-ent">MoreVertIcon</span> <span class="pl-c1">color</span><span class="pl-c1">=</span><span class="pl-s">"#fff"</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">IconButton</span><span class="pl-c1">&gt;</span> <span class="pl-kos">}</span>
  <span class="pl-c1">targetOrigin</span><span class="pl-c1">=</span><span class="pl-kos">{</span> <span class="pl-kos">{</span> <span class="pl-c1">horizontal</span>: <span class="pl-s">'right'</span><span class="pl-kos">,</span> <span class="pl-c1">vertical</span>: <span class="pl-s">'top'</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span>
  <span class="pl-c1">anchorOrigin</span><span class="pl-c1">=</span><span class="pl-kos">{</span> <span class="pl-kos">{</span> <span class="pl-c1">horizontal</span>: <span class="pl-s">'right'</span><span class="pl-kos">,</span> <span class="pl-c1">vertical</span>: <span class="pl-s">'top'</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span>
<span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-ent">MenuItem</span>
    <span class="pl-c1">primaryText</span><span class="pl-c1">=</span><span class="pl-s">"Logout"</span>
    <span class="pl-c1">onClick</span><span class="pl-c1">=</span><span class="pl-kos">{</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-s1">actions</span><span class="pl-kos">.</span><span class="pl-en">logout</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">}</span>
  <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">IconMenu</span><span class="pl-c1">&gt;</span></pre></div>
<p dir="auto">The rendered HTML:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/6344219/13511151/942dd924-e159-11e5-8a55-b5596f97c5bf.png"><img src="https://cloud.githubusercontent.com/assets/6344219/13511151/942dd924-e159-11e5-8a55-b5596f97c5bf.png" alt="screen shot 2016-03-03 at 4 01 52 pm" style="max-width: 100%;"></a></p>
<p dir="auto">If you look at the highlighted part, there is an extra, unclosed <code class="notranslate">&lt;noscript&gt;</code> in there. I believe this is what's causing issues.</p>
<p dir="auto"><strong>Edit:</strong><br>
Looks like it's coming from the <code class="notranslate">react-event-listener</code> library: <a href="https://github.com/callemall/material-ui/blob/master/src/popover/popover.jsx#L384">https://github.com/callemall/material-ui/blob/master/src/popover/popover.jsx#L384</a></p>
<p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/oliviertassinari/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/oliviertassinari">@oliviertassinari</a></p>
<h2 dir="auto">Versions</h2>
<p dir="auto">Material UI Version: 0.15.0-alpha.1<br>
React: 0.14.7<br>
Browser: Chrome</p>