<p dir="auto">i try to import an Form Login to put in page, but when i import 'FormControl'<br>
appears:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Unexpected token import
/../client-with-react/node_modules/material-ui/es/Form/FormControl.js:5
import React from 'react';

SyntaxError: Unexpected token import
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:599:28)
    at Module._compile (/Users/acauapitta/client-with-react/node_modules/source-map-support/source-map-support.js:492:25)
    at Object.Module._extensions..js (module.js:646:10)
    at Module.load (module.js:554:32)
    at tryModuleLoad (module.js:497:12)
    at Function.Module._load (module.js:489:3)
    at Module.require (module.js:579:17)
    at require (internal/module.js:11:18)"><pre class="notranslate"><code class="notranslate">Unexpected token import
/../client-with-react/node_modules/material-ui/es/Form/FormControl.js:5
import React from 'react';

SyntaxError: Unexpected token import
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:599:28)
    at Module._compile (/Users/acauapitta/client-with-react/node_modules/source-map-support/source-map-support.js:492:25)
    at Object.Module._extensions..js (module.js:646:10)
    at Module.load (module.js:554:32)
    at tryModuleLoad (module.js:497:12)
    at Function.Module._load (module.js:489:3)
    at Module.require (module.js:579:17)
    at require (internal/module.js:11:18)
</code></pre></div>
<p dir="auto">My Login Page:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;LayoutCenterBox&gt;
    &lt;Grid item xs={4} justify='center' style={{ border: '1px red solid' }}&gt;
    	&lt;FormLogin/&gt;
	&lt;/Grid&gt;

	&lt;Grid item  xs={8} style={{ float: 'right' }}&gt;
       &lt;PromoCover/&gt;
    &lt;/Grid&gt;
&lt;/LayoutCenterBox&gt;"><pre class="notranslate"><code class="notranslate">&lt;LayoutCenterBox&gt;
    &lt;Grid item xs={4} justify='center' style={{ border: '1px red solid' }}&gt;
    	&lt;FormLogin/&gt;
	&lt;/Grid&gt;

	&lt;Grid item  xs={8} style={{ float: 'right' }}&gt;
       &lt;PromoCover/&gt;
    &lt;/Grid&gt;
&lt;/LayoutCenterBox&gt;
</code></pre></div>
<p dir="auto">My FormLogin Comp:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;div&gt;
	&lt;h1&gt;Welcome!&lt;/h1&gt;
    
  &lt;Grid item&gt;
	&lt;FormControl fullWidth&gt;
		&lt;Input id=&quot;email&quot; placeholder=&quot;E-mail&quot; startAdornment={&lt;InputAdornment position=&quot;start&quot;&gt;&lt;i className=&quot;mdi mdi-account&quot;&gt;&lt;/i&gt;&lt;/InputAdornment&gt;} /&gt;
		&lt;Input id=&quot;password&quot; type=&quot;password&quot; placeholder=&quot;Password&quot; startAdornment={&lt;InputAdornment position=&quot;start&quot;&gt;&lt;i className=&quot;mdi mdi-lock&quot;&gt;&lt;/i&gt;&lt;/InputAdornment&gt;} /&gt;
	&lt;/FormControl&gt;
   &lt;/Grid&gt;
        
.
.
.
&lt;/div&gt;"><pre class="notranslate"><code class="notranslate">&lt;div&gt;
	&lt;h1&gt;Welcome!&lt;/h1&gt;
    
  &lt;Grid item&gt;
	&lt;FormControl fullWidth&gt;
		&lt;Input id="email" placeholder="E-mail" startAdornment={&lt;InputAdornment position="start"&gt;&lt;i className="mdi mdi-account"&gt;&lt;/i&gt;&lt;/InputAdornment&gt;} /&gt;
		&lt;Input id="password" type="password" placeholder="Password" startAdornment={&lt;InputAdornment position="start"&gt;&lt;i className="mdi mdi-lock"&gt;&lt;/i&gt;&lt;/InputAdornment&gt;} /&gt;
	&lt;/FormControl&gt;
   &lt;/Grid&gt;
        
.
.
.
&lt;/div&gt;
</code></pre></div>
<p dir="auto">The Code is a clone of nextjs example:<br>
<a href="https://github.com/mui-org/material-ui/tree/v1-beta/examples/nextjs">https://github.com/mui-org/material-ui/tree/v1-beta/examples/nextjs</a></p>
<p dir="auto">It's funny, because if i don't reload the page by the browser <strong>(f5)</strong> but if i change the code and save, the 'React Reload' works and the form appears...</p>
<p dir="auto">code base (it''s not working)<br>
<a href="https://codesandbox.io/s/l9p6nllo79" rel="nofollow">https://codesandbox.io/s/l9p6nllo79</a></p>
<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>v0.30 beta</td>
</tr>
<tr>
<td>React</td>
<td>latest</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome</td>
</tr>
<tr>
<td>**Next Js</td>
<td>4.2.3**</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/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">Expect that when I type into an autocomplete field, and receive a dropdown list of items to select from, on selecting an item that the autocomplete input field would retain its focus so tabbing would move to the next field.</p>

<h2 dir="auto">Current Behavior</h2>
<p dir="auto">Currently, when you select an option from a dropdown, the focus is lost, and the tab order is broken.</p>

<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto"><a href="http://www.material-ui.com/#/components/auto-complete" rel="nofollow">http://www.material-ui.com/#/components/auto-complete</a></p>
<p dir="auto">Start typing in a field - a dropdown autocomplete list will appear, select a value and then the input loses focus, and we lose the tab order.</p>
<h2 dir="auto">Context</h2>
    
<p dir="auto">This ruins keyboard accessibility for impaired users, and greatly hinders workflow in a form environment.</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>