<p dir="auto">I'm receiving a weird behavior which is: when using tab key to switch between <code class="notranslate">TextField</code> for the <strong>first</strong> time, the position of the <code class="notranslate">TextField</code> changes a little. The following screen shot might better explain the situation. I think it's because of 'FloatingLabelText` but what I don't understand is why only tab key's event causes this problem not click event, and why does this behavior only happens the first time.</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">When focus on a textfield using tab key, the position should stay the same.</p>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/19363363/34689918-0b936ee4-f46c-11e7-87c2-110472a28ff6.gif"><img src="https://user-images.githubusercontent.com/19363363/34689918-0b936ee4-f46c-11e7-87c2-110472a28ff6.gif" alt="giphy" data-animated-image="" style="max-width: 100%;"></a><br>
As shown above, only the position of TextField named 'treatmentType' is not changed because it's focused by click event rather than tab key. And if the same <code class="notranslate">TextField</code> was focused by tab before, its position won't be changed.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>

<ol dir="auto">
<li>Render component: Table &gt; TableBody &gt;TableRow &gt;TableRowColumn &gt; TextField</li>
<li>Click on the first <code class="notranslate">TextField</code> in the first <code class="notranslate">TableRowColumn</code></li>
<li>Switch focus on the other<code class="notranslate">TextField</code> by pressing Tab key.</li>
</ol>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="class TreatmentContent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            type: '',
            notes: '',
            status: '',
            location: '',
            food: '',
            firstName: '',
            lastName: '',
            email: '',
            day: ''
        };
        this.notesToAdd = {
            type: 'text',
            notes: 'text',
            status: 'text',
            location: 'text',
            food: 'text',
            firstName: 'text',
            lastName: 'text',
            email: 'text',
            day: 'number',
        };
        this.reorgTableRow = this.reorgTableRow.bind(this);
    }

    reorgTableRow() {
        const notesKeys = _.keys(this.notesToAdd);
        const chunkedKeys = _.chunk(notesKeys, 3);
        return _.map(chunkedKeys, (keyChunk, i) =&gt; (
            &lt;TableRow selectable={false} key={i} style={{border: 'None'}}&gt;
                {_.map(keyChunk, (keyName, j) =&gt; (
                    &lt;TableRowColumn key={j}&gt;
                        &lt;TextField
                            hintText={keyName}
                            floatingLabelText={keyName}
                            type={this.notesToAdd[keyName]}
                            value={this.state[keyName]}
                        /&gt;
                    &lt;/TableRowColumn&gt;
                ))}
            &lt;/TableRow&gt;
        ));
    }

    render() {
        return (
            &lt;div&gt;
                &lt;Table&gt;
                    &lt;TableBody displayRowCheckbox={false}&gt;
                        {this.reorgTableRow()}
                    &lt;/TableBody&gt;
                &lt;/Table&gt;
            &lt;/div&gt;
        );
    }
}"><pre class="notranslate"><span class="pl-k">class</span> <span class="pl-v">TreatmentContent</span> <span class="pl-k">extends</span> <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-c1">Component</span> <span class="pl-kos">{</span>
    <span class="pl-en">constructor</span><span class="pl-kos">(</span><span class="pl-s1">props</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-smi">super</span><span class="pl-kos">(</span><span class="pl-s1">props</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
        <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">state</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
            <span class="pl-c1">type</span>: <span class="pl-s">''</span><span class="pl-kos">,</span>
            <span class="pl-c1">notes</span>: <span class="pl-s">''</span><span class="pl-kos">,</span>
            <span class="pl-c1">status</span>: <span class="pl-s">''</span><span class="pl-kos">,</span>
            <span class="pl-c1">location</span>: <span class="pl-s">''</span><span class="pl-kos">,</span>
            <span class="pl-c1">food</span>: <span class="pl-s">''</span><span class="pl-kos">,</span>
            <span class="pl-c1">firstName</span>: <span class="pl-s">''</span><span class="pl-kos">,</span>
            <span class="pl-c1">lastName</span>: <span class="pl-s">''</span><span class="pl-kos">,</span>
            <span class="pl-c1">email</span>: <span class="pl-s">''</span><span class="pl-kos">,</span>
            <span class="pl-c1">day</span>: <span class="pl-s">''</span>
        <span class="pl-kos">}</span><span class="pl-kos">;</span>
        <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">notesToAdd</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
            <span class="pl-c1">type</span>: <span class="pl-s">'text'</span><span class="pl-kos">,</span>
            <span class="pl-c1">notes</span>: <span class="pl-s">'text'</span><span class="pl-kos">,</span>
            <span class="pl-c1">status</span>: <span class="pl-s">'text'</span><span class="pl-kos">,</span>
            <span class="pl-c1">location</span>: <span class="pl-s">'text'</span><span class="pl-kos">,</span>
            <span class="pl-c1">food</span>: <span class="pl-s">'text'</span><span class="pl-kos">,</span>
            <span class="pl-c1">firstName</span>: <span class="pl-s">'text'</span><span class="pl-kos">,</span>
            <span class="pl-c1">lastName</span>: <span class="pl-s">'text'</span><span class="pl-kos">,</span>
            <span class="pl-c1">email</span>: <span class="pl-s">'text'</span><span class="pl-kos">,</span>
            <span class="pl-c1">day</span>: <span class="pl-s">'number'</span><span class="pl-kos">,</span>
        <span class="pl-kos">}</span><span class="pl-kos">;</span>
        <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">reorgTableRow</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">reorgTableRow</span><span class="pl-kos">.</span><span class="pl-en">bind</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>

    <span class="pl-en">reorgTableRow</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-k">const</span> <span class="pl-s1">notesKeys</span> <span class="pl-c1">=</span> <span class="pl-s1">_</span><span class="pl-kos">.</span><span class="pl-en">keys</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">notesToAdd</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
        <span class="pl-k">const</span> <span class="pl-s1">chunkedKeys</span> <span class="pl-c1">=</span> <span class="pl-s1">_</span><span class="pl-kos">.</span><span class="pl-en">chunk</span><span class="pl-kos">(</span><span class="pl-s1">notesKeys</span><span class="pl-kos">,</span> <span class="pl-c1">3</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
        <span class="pl-k">return</span> <span class="pl-s1">_</span><span class="pl-kos">.</span><span class="pl-en">map</span><span class="pl-kos">(</span><span class="pl-s1">chunkedKeys</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-s1">keyChunk</span><span class="pl-kos">,</span> <span class="pl-s1">i</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">(</span>
            <span class="pl-c1">&lt;</span><span class="pl-ent">TableRow</span> <span class="pl-c1">selectable</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">false</span><span class="pl-kos">}</span> <span class="pl-c1">key</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">i</span><span class="pl-kos">}</span> <span class="pl-c1">style</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">{</span><span class="pl-c1">border</span>: <span class="pl-s">'None'</span><span class="pl-kos">}</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
                <span class="pl-kos">{</span><span class="pl-s1">_</span><span class="pl-kos">.</span><span class="pl-en">map</span><span class="pl-kos">(</span><span class="pl-s1">keyChunk</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-s1">keyName</span><span class="pl-kos">,</span> <span class="pl-s1">j</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">(</span>
                    <span class="pl-c1">&lt;</span><span class="pl-ent">TableRowColumn</span> <span class="pl-c1">key</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">j</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
                        <span class="pl-c1">&lt;</span><span class="pl-ent">TextField</span>
                            <span class="pl-c1">hintText</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">keyName</span><span class="pl-kos">}</span>
                            <span class="pl-c1">floatingLabelText</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">keyName</span><span class="pl-kos">}</span>
                            <span class="pl-c1">type</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">notesToAdd</span><span class="pl-kos">[</span><span class="pl-s1">keyName</span><span class="pl-kos">]</span><span class="pl-kos">}</span>
                            <span class="pl-c1">value</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">state</span><span class="pl-kos">[</span><span class="pl-s1">keyName</span><span class="pl-kos">]</span><span class="pl-kos">}</span>
                        <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
                    <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">TableRowColumn</span><span class="pl-c1">&gt;</span>
                <span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">}</span>
            <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">TableRow</span><span class="pl-c1">&gt;</span>
        <span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>

    <span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-k">return</span> <span class="pl-kos">(</span>
            <span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
                <span class="pl-c1">&lt;</span><span class="pl-ent">Table</span><span class="pl-c1">&gt;</span>
                    <span class="pl-c1">&lt;</span><span class="pl-ent">TableBody</span> <span class="pl-c1">displayRowCheckbox</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">false</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
                        <span class="pl-kos">{</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">reorgTableRow</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">}</span>
                    <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">TableBody</span><span class="pl-c1">&gt;</span>
                <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Table</span><span class="pl-c1">&gt;</span>
            <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
        <span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<h2 dir="auto">Context</h2>

<h2 dir="auto">Your Environment</h2>

<p dir="auto">"react": "^15.6.1",<br>
"material-ui": "latest",<br>
browser: Chrome v63</p>
<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td></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>
<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">The tab indicator must always show the selected tab</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">When the number of tabs in a tab menu changes the indicator have a wrong position until next interaction such as clicking a new tab.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<ol dir="auto">
<li>Go to <a href="https://codesandbox.io/s/2pm5jzmk10" rel="nofollow">https://codesandbox.io/s/2pm5jzmk10</a></li>
<li>Select a random tab</li>
<li>Click switch</li>
<li>Chehck indicator position</li>
</ol>
<h2 dir="auto">Context</h2>
<p dir="auto">I Noticed this issue when trying to remove some tabs based on the users permission role. I quickly realised that the indicator was not in sync with the amount of tabs inside the menu.</p>
<h2 dir="auto">Reproduction 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.11</td>
</tr>
<tr>
<td>React</td>
<td>15.5.3</td>
</tr>
<tr>
<td>browser</td>
<td>Google Chrome v61</td>
</tr>
</tbody>
</table>
<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.6</td>
</tr>
<tr>
<td>React</td>
<td>15.6.1</td>
</tr>
<tr>
<td>browser</td>
<td>Google Chrome v61</td>
</tr>
</tbody>
</table>