<p dir="auto">In v0.x we used to be able to add the <code class="notranslate">keyboardFocused</code> prop to a <code class="notranslate">RaisedButton</code> or <code class="notranslate">FlatButton</code> to focus it on render and activate the focus ripple. In v1, this yields an <code class="notranslate">Unknown prop</code> warning on the root element.</p>
<p dir="auto">We could easily hijack the <code class="notranslate">autoFocus</code> prop to set the initial state of the button, but I'm assuming there is an issue if multiple <code class="notranslate">autoFocus</code>ed components are rendered, so we'd have to verify that this is the actual focused element when the dom is fully rendered?</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">Adding the <code class="notranslate">autoFocus</code> prop on a <code class="notranslate">Button</code> should trigger the <code class="notranslate">focusRipple</code> on render.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;Button autoFocus&gt;
  My button
&lt;/Button&gt;"><pre class="notranslate"><span class="pl-c1">&lt;</span><span class="pl-ent">Button</span> <span class="pl-c1">autoFocus</span><span class="pl-c1">&gt;</span>
  My button
<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Button</span><span class="pl-c1">&gt;</span></pre></div>
<p dir="auto">When looking for the DOM's <code class="notranslate">activeElement</code>, the root <code class="notranslate">button</code> is already properly returned.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">The <code class="notranslate">button</code> is focused, but the <code class="notranslate">focusRipple</code> doesn't appear.</p>
<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>next</td>
</tr>
</tbody>
</table>
<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">When I use the tab key to navigate a page with material ui (lets say the component demos on the next site) and focuses a radio button or a checkbox they should display a circle under the control to convey that the control has focus like shown in <a href="https://material.io/guidelines/components/selection-controls.html#selection-controls-checkbox" rel="nofollow">https://material.io/guidelines/components/selection-controls.html#selection-controls-checkbox</a></p>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto">Nothing is shown, which makes it really hard to use the controls with a keyboard.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>

<ol dir="auto">
<li>Go to <a href="https://material-ui.com/demos/selection-controls/" rel="nofollow">https://material-ui.com/demos/selection-controls/</a></li>
<li>Click the text under the Checkboxes heading (To avoid having to tab through everything else)</li>
<li>Use the tab key to navigate the page</li>
</ol>
<h2 dir="auto">Context</h2>
    
<p dir="auto">A form using Material UI</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>1.0.0-beta.21</td>
</tr>
<tr>
<td>React</td>
<td>16</td>
</tr>
<tr>
<td>browser</td>
<td>Firefox 57</td>
</tr>
<tr>
<td>etc</td>
<td>Visible on the demo page</td>
</tr>
</tbody>
</table>