<p dir="auto">For select field, if we press keyboard, it should focus on the option start with the letter same as key press.</p>
<p dir="auto">Give a simple select with 3 options:</p>
<blockquote>
<p dir="auto"><code class="notranslate">&lt;Select value={this.state.age} onChange={this.handleChange} inputProps={{ name: 'age', id: 'age-simple', }} &gt; &lt;MenuItem value=""&gt; &lt;em&gt;None&lt;/em&gt; &lt;/MenuItem&gt; &lt;MenuItem value={1}&gt;One&lt;/MenuItem&gt; &lt;MenuItem value={10}&gt;Ten&lt;/MenuItem&gt; &lt;MenuItem value={50}&gt;Fifty&lt;/MenuItem&gt; &lt;/Select&gt;</code></p>
</blockquote>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">Press O, the first option should be focused<br>
Press F, the last option should be focused</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">Press O, T or F does on the keyboard does not have any action.</p>
<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.2.0</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome</td>
</tr>
<tr>
<td>etc</td>
<td></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">Hi, Im trying to use the updated <code class="notranslate">Hidden</code> with <code class="notranslate">initialWidth</code></p>
<p dir="auto">Not sure which one of these is correct:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;Hidden xsDown initialWidth={100}&gt;
&lt;/Hidden&gt;
&lt;Hidden xsDown initialWidth={&quot;xs&quot;}&gt;
&lt;/Hidden&gt;"><pre class="notranslate"><code class="notranslate">&lt;Hidden xsDown initialWidth={100}&gt;
&lt;/Hidden&gt;
&lt;Hidden xsDown initialWidth={"xs"}&gt;
&lt;/Hidden&gt;
</code></pre></div>
<p dir="auto">Either option gives me a warning</p>
<blockquote>
<p dir="auto">Warning: Failed prop type: Invalid prop <code class="notranslate">initialWidth</code> of type <code class="notranslate">string</code> supplied to <code class="notranslate">Hidden</code>, expected <code class="notranslate">number</code>.<br>
in Hidden</p>
</blockquote>
<blockquote>
<p dir="auto">Warning: Failed prop type: Invalid prop <code class="notranslate">initialWidth</code> of value <code class="notranslate">100</code> supplied to <code class="notranslate">WithWidth(HiddenJs)</code>, expected one of ["xs","sm","md","lg","xl"].<br>
in WithWidth(HiddenJs)</p>
</blockquote>
<blockquote>
<p dir="auto">Warning: Failed prop type: Invalid prop <code class="notranslate">width</code> of type <code class="notranslate">number</code> supplied to <code class="notranslate">HiddenJs</code>, expected <code class="notranslate">string</code>.<br>
in HiddenJs</p>
</blockquote>
<p dir="auto">I dont see the property on Hidden.d.ts either in HiddenProps/HiddenJsProps</p>
<h2 dir="auto">Current Behavior</h2>

<h2 dir="auto">Steps to Reproduce (for bugs)</h2>

<p dir="auto">Looking into the source</p>
<p dir="auto">HiddenJs suggests it should be a number<br>
<a href="https://github.com/mui-org/material-ui/blob/b72e77151659484c4c1a4a3853e66ee742d1a845/src/Hidden/HiddenJs.js#L98">https://github.com/mui-org/material-ui/blob/b72e77151659484c4c1a4a3853e66ee742d1a845/src/Hidden/HiddenJs.js#L98</a></p>
<p dir="auto">However <code class="notranslate">initialWidth</code> also gets passed into <code class="notranslate">withWidth</code><br>
<a href="https://github.com/mui-org/material-ui/blob/b72e77151659484c4c1a4a3853e66ee742d1a845/src/Hidden/HiddenJs.js#L153">https://github.com/mui-org/material-ui/blob/b72e77151659484c4c1a4a3853e66ee742d1a845/src/Hidden/HiddenJs.js#L153</a></p>
<p dir="auto">Which expects a string<br>
<a href="https://github.com/mui-org/material-ui/blob/b72e77151659484c4c1a4a3853e66ee742d1a845/src/utils/withWidth.js#L121">https://github.com/mui-org/material-ui/blob/b72e77151659484c4c1a4a3853e66ee742d1a845/src/utils/withWidth.js#L121</a></p>
<h2 dir="auto">Context</h2>

<p dir="auto">For the moment my workaround is this, which seems to do what I want (ie hidden on SSR)</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="var hiddenmdprops: any = {
	mdDown: true,
	initialWidth: 'md',
};	
&lt;Hidden {...hiddenmdprops}&gt;
&lt;/Hidden&gt;"><pre class="notranslate"><code class="notranslate">var hiddenmdprops: any = {
	mdDown: true,
	initialWidth: 'md',
};	
&lt;Hidden {...hiddenmdprops}&gt;
&lt;/Hidden&gt;
</code></pre></div>
<p dir="auto">And just ignore the warning.</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-beta.27</td>
</tr>
<tr>
<td>React</td>
<td></td>
</tr>
<tr>
<td>browser</td>
<td></td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>