<p dir="auto">I have a <code class="notranslate">Dialog</code> component being triggered by onClick of a <code class="notranslate">MenuItem</code>. It opens correctly. But when I try to close the dialog (either via click on backdrop or on close button) the dialog is not correctly dismissed.<br>
<strong>This only happens if you use a transition (Slide).</strong></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 would expect the modal to be closed correctly. <g-emoji class="g-emoji" alias="grin" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f601.png">😁</g-emoji></p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">The CSS classes and the DOM modal element aren't removed, so the rest of the sites UI is not clickable anymore.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/8998518/32415129-d9c81f18-c234-11e7-90b5-322524cc96dd.png"><img width="455" alt="bildschirmfoto 2017-11-05 um 14 22 52" src="https://user-images.githubusercontent.com/8998518/32415129-d9c81f18-c234-11e7-90b5-322524cc96dd.png" style="max-width: 100%;"></a></p>
Element which is created by the dialog but not removed on its close
<h2 dir="auto">Steps to Reproduce</h2>
<p dir="auto"><a href="https://codesandbox.io/s/yk4o713j8x" rel="nofollow"><img src="https://camo.githubusercontent.com/90808661433696bc57dce8d4ad732307b5cec6270e6b846f114dcd7ee7f9458a/68747470733a2f2f636f646573616e64626f782e696f2f7374617469632f696d672f706c61792d636f646573616e64626f782e737667" alt="Edit dialog not dismissed bug" data-canonical-src="https://codesandbox.io/static/img/play-codesandbox.svg" style="max-width: 100%;"></a></p>
<h2 dir="auto">Context</h2>
<p dir="auto">This problem makes the UI not useable anymore. I think it is a mandatory feature to toggle dialogs from menus.</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.19</td>
</tr>
<tr>
<td>React</td>
<td>16.0.0</td>
</tr>
<tr>
<td>browser</td>
<td>Firefox, Chrome, Safari  (all most recent releases)</td>
</tr>
<tr>
<td>etc</td>
<td>macOS 13.10.31.1, Windows  10</td>
</tr>
</tbody>
</table>
<p dir="auto">My app break after updated to latest beta.</p>
<p dir="auto">The dialog always shown. Previous version beta 18 don't have this issue</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=" &lt;Drawer
         open={false}
          type={window.innerWidth &lt; 768 ? 'responsive' : 'persistent'}
          anchor=&quot;right&quot;
          classes={{ paper: classes.paper, docked: classes.docked }}
&gt;

     /// content

&lt;/Drawer&gt;"><pre class="notranslate"> <span class="pl-c1">&lt;</span><span class="pl-ent">Drawer</span>
         <span class="pl-c1">open</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">false</span><span class="pl-kos">}</span>
          <span class="pl-c1">type</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-c1">innerWidth</span> <span class="pl-c1">&lt;</span> <span class="pl-c1">768</span> ? <span class="pl-s">'responsive'</span> : <span class="pl-s">'persistent'</span><span class="pl-kos">}</span>
          <span class="pl-c1">anchor</span><span class="pl-c1">=</span><span class="pl-s">"right"</span>
          <span class="pl-c1">classes</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">{</span> <span class="pl-c1">paper</span>: <span class="pl-s1">classes</span><span class="pl-kos">.</span><span class="pl-c1">paper</span><span class="pl-kos">,</span> <span class="pl-c1">docked</span>: <span class="pl-s1">classes</span><span class="pl-kos">.</span><span class="pl-c1">docked</span> <span class="pl-kos">}</span><span class="pl-kos">}</span>
<span class="pl-c1">&gt;</span>

     /// content

<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Drawer</span><span class="pl-c1">&gt;</span></pre></div>
<p dir="auto">I've tried to set open to false still show the drawer.</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-19 beta</td>
</tr>
<tr>
<td>React</td>
<td>16</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome</td>
</tr>
<tr>
<td>etc</td>
<td>Windows 10</td>
</tr>
</tbody>
</table>