<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">Caret should position on active input field.</p>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto">Caret is often appearing as if input is on the next input<br>
Tested on actual mobile device and recorded video using simulator on iOS</p>
<p dir="auto">SEE VIDEO HERE:<br>
<a href="https://drive.google.com/file/d/1TfyzHa8TZDiiDMN04_O68MTNVAgAZSbv/view?usp=sharing" rel="nofollow">https://drive.google.com/file/d/1TfyzHa8TZDiiDMN04_O68MTNVAgAZSbv/view?usp=sharing</a></p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>

<ol dir="auto">
<li></li>
<li></li>
<li></li>
<li></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>beta32</td>
</tr>
<tr>
<td>React</td>
<td>16.2.0</td>
</tr>
<tr>
<td>browser</td>
<td>iOS Safari</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>
<p dir="auto">I let a fullscreen dialog appear in my web application and have a TextField being automatically focused. The field is kind of focused, but the blinking | is not displayed.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/8998518/32510535-3b190b7a-c3f1-11e7-84f3-4f9d3821f721.jpg"><img src="https://user-images.githubusercontent.com/8998518/32510535-3b190b7a-c3f1-11e7-84f3-4f9d3821f721.jpg" alt="img_1229" style="max-width: 100%;"></a></p>
<p dir="auto">If you tab on the <strong>same</strong> TextField again, it'll blink one line under the text field.<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/8998518/32510556-4f07944e-c3f1-11e7-8943-662426d4f2a8.jpg"><img src="https://user-images.githubusercontent.com/8998518/32510556-4f07944e-c3f1-11e7-8943-662426d4f2a8.jpg" alt="img_1230" style="max-width: 100%;"></a></p>
<p dir="auto">Again on the same: TextField is unfocused.<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/8998518/32510565-52d1d4cc-c3f1-11e7-99bc-94d2b1aaad38.jpg"><img src="https://user-images.githubusercontent.com/8998518/32510565-52d1d4cc-c3f1-11e7-99bc-94d2b1aaad38.jpg" alt="img_1231" style="max-width: 100%;"></a></p>
<p dir="auto">Again on the same, the correct TextField is finally focused with |.<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/8998518/32510575-56be533a-c3f1-11e7-8cf8-b8558fd630ab.jpg"><img src="https://user-images.githubusercontent.com/8998518/32510575-56be533a-c3f1-11e7-8cf8-b8558fd630ab.jpg" alt="img_1233" style="max-width: 100%;"></a></p>
<ul dir="auto">
<li>[ x] 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>
<p dir="auto">This is my dialog content:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;DialogContent style={{ textAlign: 'center' }}&gt;
              &lt;DialogTitle&gt;
                Enter your lorem link
              &lt;/DialogTitle&gt;
              &lt;DialogContentText&gt;
                Lorem ipsum.
              &lt;/DialogContentText&gt;
              &lt;TextField
                required
                autoFocus
                inputRef={el =&gt; this.TitleInput = el}
                margin=&quot;normal&quot;
                label=&quot;Enter your course title&quot;
                type=&quot;text&quot;
                style={{ width: '60%', minWidth: '250px' }}
                inputProps={{ maxLength: 10 }}
              /&gt;
              &lt;TextField
                required
                inputRef={el =&gt; this.LinkInput = el}
                margin=&quot;normal&quot;
                label=&quot;Enter your link&quot;
                type=&quot;text&quot;
                style={{ width: '60%', minWidth: '250px' }}
              /&gt;
&lt;/DialogContent&gt;"><pre class="notranslate"><code class="notranslate">&lt;DialogContent style={{ textAlign: 'center' }}&gt;
              &lt;DialogTitle&gt;
                Enter your lorem link
              &lt;/DialogTitle&gt;
              &lt;DialogContentText&gt;
                Lorem ipsum.
              &lt;/DialogContentText&gt;
              &lt;TextField
                required
                autoFocus
                inputRef={el =&gt; this.TitleInput = el}
                margin="normal"
                label="Enter your course title"
                type="text"
                style={{ width: '60%', minWidth: '250px' }}
                inputProps={{ maxLength: 10 }}
              /&gt;
              &lt;TextField
                required
                inputRef={el =&gt; this.LinkInput = el}
                margin="normal"
                label="Enter your link"
                type="text"
                style={{ width: '60%', minWidth: '250px' }}
              /&gt;
&lt;/DialogContent&gt;
</code></pre></div>
<h2 dir="auto">Environment</h2>
<p dir="auto">This bug only happens on iOS devices.</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.19</td>
</tr>
<tr>
<td>React</td>
<td>16.0.0</td>
</tr>
<tr>
<td>browser</td>
<td>iOS Safari</td>
</tr>
<tr>
<td>etc</td>
<td>iPhone 7, iPad Pro 9"</td>
</tr>
</tbody>
</table>