<p dir="auto">In version 1.0.0-beta.19 a new syntax for specifying the transition of a dialog is documented as:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const Transition = props =&gt; &lt;Slide direction=&quot;left&quot; {...props} /&gt;
&lt;Dialog transition={Transition} /&gt;;"><pre class="notranslate"><code class="notranslate">const Transition = props =&gt; &lt;Slide direction="left" {...props} /&gt;
&lt;Dialog transition={Transition} /&gt;;
</code></pre></div>
<p dir="auto">In my attempt to keep up with the API change, I replaced my old code with an inline function:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;Dialog transition={props =&gt; &lt;Slide direction=&quot;left&quot; {...props}} /&gt;;"><pre class="notranslate"><code class="notranslate">&lt;Dialog transition={props =&gt; &lt;Slide direction="left" {...props}} /&gt;;
</code></pre></div>
<p dir="auto">While this seemed to work at first, it took me quite some time to discover that when the dialog is closed, an invisible mask layer still remains, preventing any interaction with the HTML content below.</p>
<p dir="auto">I think the new API change somewhat unclear. If <code class="notranslate">Transition</code> is a function, why does inline not work? If it is a component, shouldn't we have written the code as:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;Dialog transition={&lt;Transition /&gt;} /&gt;;"><pre class="notranslate"><code class="notranslate">&lt;Dialog transition={&lt;Transition /&gt;} /&gt;;
</code></pre></div>
<p dir="auto">Anyway, the <code class="notranslate">Dialog</code> should throw an error when an inline is used to prevent user from being bitten unexpectedly as I was. At the very least, the following quote from the issue <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="268816749" data-permission-text="Title is private" data-url="https://github.com/mui/material-ui/issues/8858" data-hovercard-type="pull_request" data-hovercard-url="/mui/material-ui/pull/8858/hovercard" href="https://github.com/mui/material-ui/pull/8858">#8858</a> should be retained in the changelog.</p>
<p dir="auto"><code class="notranslate">This breaking change increases the consistency of our API. Also, it's allowing a more strict typing definition that can help spotting issues. One important thing to notice is that the component creation needs to be outside of the render method. Otherwise, a new instance will be created and the animation will lose his state.</code></p>
<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>