<h3 dir="auto">Problem description</h3>
<p dir="auto">this is what causing the problem<br>
<code class="notranslate">&lt;JssProvider&gt;</code></p>
<p dir="auto">This is a bug that i saw when making production build.</p>
<p dir="auto"><strong>Below images the left side is development and right side is production.</strong></p>
<p dir="auto">This is my component.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/1776d2a47658d96ba6b485367cff2cfac34f151095dd9fcf774a5f2aa37da73e/687474703a2f2f692e696d6775722e636f6d2f704248567362452e706e67"><img src="https://camo.githubusercontent.com/1776d2a47658d96ba6b485367cff2cfac34f151095dd9fcf774a5f2aa37da73e/687474703a2f2f692e696d6775722e636f6d2f704248567362452e706e67" alt="" data-canonical-src="http://i.imgur.com/pBHVsbE.png" style="max-width: 100%;"></a></p>
<table role="table">
<thead>
<tr>
<th align="center">Dev classes</th>
<th>Prod classes</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">MuiPaper-root-7</td>
<td>c7</td>
</tr>
<tr>
<td align="center">MuiPaper-shadow2-b</td>
<td>cb</td>
</tr>
<tr>
<td align="center">MuiPaper-rounded-8</td>
<td>c8</td>
</tr>
<tr>
<td align="center">inject-Forgot-with-LangarStore-paper-3</td>
<td>c3</td>
</tr>
</tbody>
</table>
<p dir="auto">Below you see <code class="notranslate">.c7</code> = <code class="notranslate">.MuiPaper-root-7</code> which should only have <code class="notranslate">background-color: #424242;</code>.<br>
But in production it has another set of <code class="notranslate">style</code> declarations.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/50d7701ef723f37fef5b95e0815088350d8232b9da4c1c3ff05dccf9c5ca0599/687474703a2f2f692e696d6775722e636f6d2f6f4f38464e61342e706e67"><img src="https://camo.githubusercontent.com/50d7701ef723f37fef5b95e0815088350d8232b9da4c1c3ff05dccf9c5ca0599/687474703a2f2f692e696d6775722e636f6d2f6f4f38464e61342e706e67" alt="" data-canonical-src="http://i.imgur.com/oO8FNa4.png" style="max-width: 100%;"></a></p>
<p dir="auto">Turns out in production <code class="notranslate">.inject-DarkError-with-DarkErrorStore-LangarStore-root-7</code> and <code class="notranslate">.MuiPaper-root-7</code> are given the same classname <code class="notranslate">.c7</code></p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/f17348d3e28f6194f968f92a59ed7c82e861e06880e31c0ffce9f2ff33595904/687474703a2f2f692e696d6775722e636f6d2f78466332735a502e706e67"><img src="https://camo.githubusercontent.com/f17348d3e28f6194f968f92a59ed7c82e861e06880e31c0ffce9f2ff33595904/687474703a2f2f692e696d6775722e636f6d2f78466332735a502e706e67" alt="" data-canonical-src="http://i.imgur.com/xFc2sZP.png" style="max-width: 100%;"></a></p>
<h3 dir="auto">Steps to reproduce</h3>
<p dir="auto">Screenshots only<br>
<em>update</em>: <a href="https://github.com/dsslimshaddy/jssprovider-bug">https://github.com/dsslimshaddy/jssprovider-bug</a></p>
<h3 dir="auto">Versions</h3>
<ul dir="auto">
<li>Material-UI: beta6</li>
<li>React: 15.6.1</li>
<li>Browser: latest chrome</li>
</ul>
<p dir="auto">When using keyboard to navigate to, and use, a SelectField, when activating the field to open the dropdown, the currently selected item is not highlighted, nor in focus.</p>
<p dir="auto">Example: <a href="https://www.youtube.com/watch?v=swz82ul6Hao" rel="nofollow">https://www.youtube.com/watch?v=swz82ul6Hao</a></p>
<p dir="auto">On clicking enter to open the dropdown, nothing is currently keyboard highlighted - on clicking "down" on the keyboard, the 2nd item is selected.</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">We would expect the first/current item to be focussed on opening the dropdown.</p>
<h2 dir="auto">Current Behavior</h2>

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

<ol dir="auto">
<li>Tab to a SelectField</li>
<li>Click enter to activate/open the field</li>
<li>Note that nothing is currently focussed/selected</li>
<li>Pressing down selects the next item in the list.</li>
</ol>
<h2 dir="auto">Context</h2>
    
<p dir="auto">Getting complaints from users during testing that to select the first item, we need to click down, then up again, and confusing that nothing is focussed on activating the dropdown.</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.0</td>
</tr>
<tr>
<td>React</td>
<td>15.6.1</td>
</tr>
<tr>
<td>browser</td>
<td>Any</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>