<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">If you navigate to the Select element using the tab key it gets focused and both the underline and the input label gets colored.<br>
If you select an option from the Select using the mouse or the keyboard after the element gets selected and it's value gets updated the Select remains in focus and both the underline and the input label remains colored.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/14878391/34086457-9a455dd8-e3a4-11e7-8e76-af64c47a30db.PNG"><img src="https://user-images.githubusercontent.com/14878391/34086457-9a455dd8-e3a4-11e7-8e76-af64c47a30db.PNG" alt="expected_behavior" style="max-width: 100%;"></a></p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">Switching to an Select is working as intended however if you select an option using the mouse or the keyboard only the underline remains colored, the input label loses the coloring.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/14878391/34086463-a043c6fc-e3a4-11e7-8d6a-f80b20684898.PNG"><img src="https://user-images.githubusercontent.com/14878391/34086463-a043c6fc-e3a4-11e7-8d6a-f80b20684898.PNG" alt="current_behavior" style="max-width: 100%;"></a></p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>

<p dir="auto"><a href="https://codesandbox.io/s/7yplykn0rq" rel="nofollow">https://codesandbox.io/s/7yplykn0rq</a></p>
<ol dir="auto">
<li>Click on a Select element</li>
<li>From the menu select an option</li>
<li>When the select is updated with the newly selected option the coloring of the input label disappears</li>
</ol>
<h2 dir="auto">Context</h2>

<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.24</td>
</tr>
<tr>
<td>React</td>
<td>16.2.0</td>
</tr>
<tr>
<td>browser</td>
<td>Electron (Chrome 61.0.3163.100)</td>
</tr>
</tbody>
</table>
<p dir="auto">When creating a BottomNavigation component with multiple BottomNavigationItem, the BottomNavigationItem are not centered in IE11.</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">I expect all the BottomNavigationItem to be centered within the BottomNavigation component. This is how it looks in Firefox ESR 52, Firefox 57, Chrome 62 and Chrome 63:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/9699939/34259234-7a5e9cf4-e62f-11e7-9b4c-37dc34241740.png"><img src="https://user-images.githubusercontent.com/9699939/34259234-7a5e9cf4-e62f-11e7-9b4c-37dc34241740.png" alt="image" style="max-width: 100%;"></a></p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">In IE11, it appears that the first BottomNavigationItem is centered and the rest of the BottomNavigationItem moved to the right:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/9699939/34259258-9a734cec-e62f-11e7-99e7-40a54c68c62a.png"><img src="https://user-images.githubusercontent.com/9699939/34259258-9a734cec-e62f-11e7-99e7-40a54c68c62a.png" alt="image" style="max-width: 100%;"></a></p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto">This bug is visible on the BottomNavigation component page on material-ui.com <a href="http://www.material-ui.com/#/components/bottom-navigation" rel="nofollow">here</a>.</p>
<p dir="auto">I have also mocked up an example:<br>
<a href="https://codesandbox.io/s/o9q3kjrzkq" rel="nofollow"><img src="https://camo.githubusercontent.com/90808661433696bc57dce8d4ad732307b5cec6270e6b846f114dcd7ee7f9458a/68747470733a2f2f636f646573616e64626f782e696f2f7374617469632f696d672f706c61792d636f646573616e64626f782e737667" alt="Edit o9q3kjrzkq" data-canonical-src="https://codesandbox.io/static/img/play-codesandbox.svg" style="max-width: 100%;"></a></p>
<h2 dir="auto">Context</h2>
<p dir="auto">I think the look should be consistent across browsers and the way the BottomNavigation component is being displayed on Firefox/Chrome is how it was intended to look.</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.20.0</td>
</tr>
<tr>
<td>React</td>
<td>16.2.0</td>
</tr>
<tr>
<td>browser</td>
<td>IE11</td>
</tr>
</tbody>
</table>