<p dir="auto">React version: 16</p>
<h2 dir="auto">Steps To Reproduce</h2>
<p dir="auto">Open the <a href="https://codepen.io/c392625/pen/RwapKja" rel="nofollow">codepen</a> demo.</p>
<ol dir="auto">
<li>Focus the outside div by clicking the black area</li>
<li>Focus inner yellow div by either pressing arrow keys or clicking or tab</li>
</ol>
<h2 dir="auto">The current behavior</h2>
<p dir="auto">When using arrow keys to change focus, <code class="notranslate">render</code> is called once <strong>only</strong>.<br>
When using click or tab to change focus, <code class="notranslate">render</code> is called <strong>twice</strong>.</p>
<h2 dir="auto">The expected behavior</h2>
<p dir="auto"><code class="notranslate">render</code> should be called the same times under 2 scenarios.</p>
<p dir="auto">React version: <code class="notranslate">0.0.0-experimental-4c8c98ab9</code> with concurrent mode.</p>
<h2 dir="auto">Steps To Reproduce</h2>
<ol dir="auto">
<li>In the provided code sandbox, click on a <code class="notranslate">Todo</code> component</li>
<li>Tab back and forth between the two</li>
<li>At inconsistent times, there will be a frame where the focus hasn't left, but the outline isn't rendered. The outline is only drawn when focus is in. Because there is a brief frame without the border, the todo visibly flickers.</li>
</ol>
<p dir="auto">Link to code example:</p>
<p dir="auto"><a href="https://codesandbox.io/s/samc-focus-demo-9jyso?file=/package.json:201-229" rel="nofollow">https://codesandbox.io/s/samc-focus-demo-9jyso?file=/package.json:201-229</a></p>
<p dir="auto">Video; <a href="https://drive.google.com/file/d/18PW8M_VvE3Nau7NkdQq4X8En_Vcen_xQ/view?usp=sharing" rel="nofollow">https://drive.google.com/file/d/18PW8M_VvE3Nau7NkdQq4X8En_Vcen_xQ/view?usp=sharing</a><br>
Focus shifts multiple times at the beginning, without a flicker.<br>
Around the 6 seconds mark, there is a flicker.</p>
<p dir="auto">Photo of the frame;<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/787007/87840493-3e811600-c8e3-11ea-8323-076faaabc8c7.png"><img src="https://user-images.githubusercontent.com/787007/87840493-3e811600-c8e3-11ea-8323-076faaabc8c7.png" alt="image" style="max-width: 100%;"></a></p>
<h2 dir="auto">The current behavior</h2>
<p dir="auto">At times there is an 'impossible' frame, where the focus has been set to false, despite the focus just having shifted from one element to another within the same div.</p>
<h2 dir="auto">The expected behavior</h2>
<p dir="auto">I'm not sure if this pattern is something that is concurrent mode incompatible or something...</p>
<p dir="auto">But regardless, I'd expect the behaviour to be consistent - eg for <code class="notranslate">focus</code> and <code class="notranslate">blur</code> events to be combined into a single frame.</p>
<p dir="auto">This codepen shows the expected outcome with vanila JS <a href="https://codepen.io/samcooke98/pen/OJMaXvx" rel="nofollow">https://codepen.io/samcooke98/pen/OJMaXvx</a></p>
<h2 dir="auto">Related?</h2>
<p dir="auto"><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="658347743" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/19385" data-hovercard-type="issue" data-hovercard-url="/facebook/react/issues/19385/hovercard" href="https://github.com/facebook/react/issues/19385">#19385</a></p>