<p dir="auto">When you use "TAB" and you select a checkbox it looks like in picture1. If you set programmatically the focus of the checkbox it does not have the effect. If you set the checkbox programmatically it doesn`t have the effect and looks like in picture2.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/25934591/34425252-b532f838-ec2a-11e7-8f0d-e2bb0e0a99ac.PNG"><img src="https://user-images.githubusercontent.com/25934591/34425252-b532f838-ec2a-11e7-8f0d-e2bb0e0a99ac.PNG" alt="checkbox_materialui" style="max-width: 100%;"></a><br>
(Picture1)</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/25934591/34425349-33f8f870-ec2b-11e7-98bf-b09dd223e81a.PNG"><img src="https://user-images.githubusercontent.com/25934591/34425349-33f8f870-ec2b-11e7-98bf-b09dd223e81a.PNG" alt="checkbox2" style="max-width: 100%;"></a><br>
(Picture2)</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">Picture1</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">Picture2</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;Checkbox
	checked={true}
	inputRef={ ref =&gt; this.myReference= ref}
/&gt;"><pre class="notranslate"><code class="notranslate">&lt;Checkbox
	checked={true}
	inputRef={ ref =&gt; this.myReference= ref}
/&gt;
</code></pre></div>
<p dir="auto">And then make a timer that waits a few seconds before you set the focus:<br>
<code class="notranslate">this.myReference.focus();</code></p>
<p dir="auto">Sorry, I tried Codesandbox, but I didn`t get it working :-/</p>
<h2 dir="auto">Environment</h2>
<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>Beta25</td>
</tr>
<tr>
<td>React</td>
<td>16.2.0</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome</td>
</tr>
</tbody>
</table>
<p dir="auto">In the docs, the <code class="notranslate">&lt;Slide&gt;</code> component specifies that <code class="notranslate">&lt;Transition&gt;</code> properties are also available. <a href="https://reactcommunity.org/react-transition-group/#Transition-prop-children" rel="nofollow">Transition allows for a function or a React Element for the children prop</a>, but the Slide component is expecting only an element. If you do use a function, it works as defined in the Transition docs, but supplies the invalid prop warning in the console.</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"><code class="notranslate">&lt;Slide&gt;</code> children prop should accept a function that passes in status and returns a React Element as well as a React Element like <code class="notranslate">&lt;Transition&gt;</code>.</p>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto"><code class="notranslate">&lt;Slide&gt;</code> only accepts a ReactElement in PropTypes. Passing a function throws a PropTypes warning, but still functions as expected in the <code class="notranslate">&lt;Transition&gt;</code> docs.</p>
<p dir="auto">Console warning:<br>
<code class="notranslate">Warning: Failed prop type: Invalid prop `children` of type `function` supplied to `Slide`, expected a single ReactElement.</code></p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto"><a href="https://codesandbox.io/s/0348zn430l" rel="nofollow">https://codesandbox.io/s/0348zn430l</a></p>

<h2 dir="auto">Context</h2>

<p dir="auto">We are animating <code class="notranslate">&lt;Paper&gt;</code> elements with Slide transitions based on React Router routes. The problem with just Using slide and an element is React Router will unmount before the slide out animation happens, so we need to always have the Slide element rendered and have the route control the <code class="notranslate">in</code> prop on <code class="notranslate">&lt;Slide&gt;</code>. This however creates some issues because <code class="notranslate">&lt;Slide&gt;</code> always mounts the child, so I need to control whether a dummy empty element, or the element in the route is being displayed based on the status of <code class="notranslate">&lt;Slide&gt;</code>. So when the slide is about to happen, we mount the correct child and when the slide has exited we unmount.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const AnimatedPageRoute = props =&gt; (
  &lt;Route
    path={props.path}
    exact={props.exact}
  &gt;
    {({ match }) =&gt; (
      &lt;Slide in={match !== null} direction={props.direction} mountOnEnter unmountOnExit&gt;
        {(status) =&gt; {
          if (match &amp;&amp; status !== 'unmounted') {
            return &lt;Page light&gt;{props.children}&lt;/Page&gt;;
          }
          return &lt;Page light&gt;&lt;SplitView /&gt;&lt;/Page&gt;;
        }}

      &lt;/Slide&gt;
    )}
  &lt;/Route&gt;
);"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-v">AnimatedPageRoute</span> <span class="pl-c1">=</span> <span class="pl-s1">props</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">(</span>
  <span class="pl-c1">&lt;</span><span class="pl-ent">Route</span>
    <span class="pl-c1">path</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">props</span><span class="pl-kos">.</span><span class="pl-c1">path</span><span class="pl-kos">}</span>
    <span class="pl-c1">exact</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">props</span><span class="pl-kos">.</span><span class="pl-c1">exact</span><span class="pl-kos">}</span>
  <span class="pl-c1">&gt;</span>
    <span class="pl-kos">{</span><span class="pl-kos">(</span><span class="pl-kos">{</span> match <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">(</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">Slide</span> <span class="pl-c1">in</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">match</span> <span class="pl-c1">!==</span> <span class="pl-c1">null</span><span class="pl-kos">}</span> <span class="pl-c1">direction</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">props</span><span class="pl-kos">.</span><span class="pl-c1">direction</span><span class="pl-kos">}</span> <span class="pl-c1">mountOnEnter</span> <span class="pl-c1">unmountOnExit</span><span class="pl-c1">&gt;</span>
        <span class="pl-kos">{</span><span class="pl-kos">(</span><span class="pl-s1">status</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
          <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">match</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-s1">status</span> <span class="pl-c1">!==</span> <span class="pl-s">'unmounted'</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
            <span class="pl-k">return</span> <span class="pl-c1">&lt;</span><span class="pl-ent">Page</span> <span class="pl-c1">light</span><span class="pl-c1">&gt;</span><span class="pl-kos">{</span><span class="pl-s1">props</span><span class="pl-kos">.</span><span class="pl-c1">children</span><span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Page</span><span class="pl-c1">&gt;</span><span class="pl-kos">;</span>
          <span class="pl-kos">}</span>
          <span class="pl-k">return</span> <span class="pl-c1">&lt;</span><span class="pl-ent">Page</span> <span class="pl-c1">light</span><span class="pl-c1">&gt;</span><span class="pl-c1">&lt;</span><span class="pl-ent">SplitView</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">Page</span><span class="pl-c1">&gt;</span><span class="pl-kos">;</span>
        <span class="pl-kos">}</span><span class="pl-kos">}</span>

      <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Slide</span><span class="pl-c1">&gt;</span>
    <span class="pl-kos">)</span><span class="pl-kos">}</span>
  <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Route</span><span class="pl-c1">&gt;</span>
<span class="pl-kos">)</span><span class="pl-kos">;</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.25</td>
</tr>
<tr>
<td>React</td>
<td>16.1.1</td>
</tr>
<tr>
<td>browser</td>
<td>Electron 1.8.1</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>