<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">Current Behavior</h2>

<p dir="auto">When using check-boxes within react-virtualized(<a href="https://github.com/bvaughn/react-virtualized">https://github.com/bvaughn/react-virtualized</a>) tree, the boxes translate to right a little bit while beeing checked and back to the normal position after they are checked. Same happens during unchecking. The issue is not present when checkbox is used outside of the tree.</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.18.1</td>
</tr>
<tr>
<td>React</td>
<td>15.5.4</td>
</tr>
<tr>
<td>browser</td>
<td>any webkit based</td>
</tr>
</tbody>
</table>
<ul dir="auto">
<li>[y ] 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>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="    &lt;MuiThemeProvider&gt;
      &lt;AutoComplete
        open
        animated={false}
        filter={(searchText, key) =&gt; !key || key.includes(searchText)}
        autoFocus
        dataSource={[&quot;1&quot;, &quot;2&quot;, &quot;3&quot;]}
      /&gt;
    &lt;/MuiThemeProvider&gt;"><pre class="notranslate"><code class="notranslate">    &lt;MuiThemeProvider&gt;
      &lt;AutoComplete
        open
        animated={false}
        filter={(searchText, key) =&gt; !key || key.includes(searchText)}
        autoFocus
        dataSource={["1", "2", "3"]}
      /&gt;
    &lt;/MuiThemeProvider&gt;
</code></pre></div>
<p dir="auto"><a href="https://codesandbox.io/s/31qj76v9xq" rel="nofollow"><img src="https://camo.githubusercontent.com/90808661433696bc57dce8d4ad732307b5cec6270e6b846f114dcd7ee7f9458a/68747470733a2f2f636f646573616e64626f782e696f2f7374617469632f696d672f706c61792d636f646573616e64626f782e737667" alt="Edit 31qj76v9xq" data-canonical-src="https://codesandbox.io/static/img/play-codesandbox.svg" style="max-width: 100%;"></a></p>
<p dir="auto">If I want the list of results to be shown on load, the search results will be wrongly positioned at the top left corner. Any way to fix this? <a href="https://i.stack.imgur.com/ysQco.png" rel="nofollow">https://i.stack.imgur.com/ysQco.png</a></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.2</td>
</tr>
<tr>
<td>React</td>
<td>15.6.1</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome V60</td>
</tr>
</tbody>
</table>