<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"><strong>Dialog With Date Picker Example:</strong> if Date Picker is opened and on Esc clicked should close the Date Picker, not the Dialog.</p>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto">If Date Picker is opened and Esc button is clicked Date Picker and Dialog, both of them getting closed.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>

<ol dir="auto">
<li>visit <a href="http://www.material-ui.com/#/components/dialog" rel="nofollow">http://www.material-ui.com/#/components/dialog</a></li>
<li>go to section: Nested dialogs and click on button DIALOG WITH DATE PICKER</li>
<li>Open a Date Picker dialog by clicking on date picker input.</li>
<li>click Esc button.</li>
</ol>
<h2 dir="auto">Context</h2>
    
<p dir="auto">The user was trying to select the country in the form which is in Dialog, as the usual behavior of Exc button even if you are using any other form if Esc is clicked on the drop-down, date picker, it should lose focus.</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.1</td>
</tr>
<tr>
<td>React</td>
<td>16.0.0</td>
</tr>
<tr>
<td>browser</td>
<td>chrome</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>
<p dir="auto">TextField with type="datetime-local" doesn't fit in TableCell, if Table has a fixed layout. So, it isn't possible to open the date editor.</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">It should be possible to open a date editor.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">This <a href="https://stackblitz.com/edit/react-7z1emv?file=index.js" rel="nofollow">sample</a> shows the issue in action.<br>
The first textfield looks quite good. I fixed it by using styles as follows:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;TextField
  style={{
    display: 'block'
  }}
  InputProps={{
    style: {
      display: 'block'
    }
  }}
  // ...
/&gt;"><pre class="notranslate"><span class="pl-c1">&lt;</span><span class="pl-ent">TextField</span>
  <span class="pl-c1">style</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">{</span>
    <span class="pl-c1">display</span>: <span class="pl-s">'block'</span>
  <span class="pl-kos">}</span><span class="pl-kos">}</span>
  <span class="pl-c1">InputProps</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">{</span>
    <span class="pl-c1">style</span>: <span class="pl-kos">{</span>
      <span class="pl-c1">display</span>: <span class="pl-s">'block'</span>
    <span class="pl-kos">}</span>
  <span class="pl-kos">}</span><span class="pl-kos">}</span>
  <span class="pl-c">// ...</span>
<span class="pl-c1">/</span><span class="pl-c1">&gt;</span></pre></div>
<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.30</td>
</tr>
<tr>
<td>React</td>
<td>16.1.1</td>
</tr>
<tr>
<td>browser</td>
<td>Google Chrome v63</td>
</tr>
</tbody>
</table>