<p dir="auto">React version: <code class="notranslate">0.0.0-experimental-94c0244ba</code></p>
<h2 dir="auto">Steps To Reproduce</h2>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import React from &quot;react&quot;;
import Rating from &quot;@material-ui/lab/Rating&quot;;
import &quot;./styles.css&quot;;

export default function App() {
  const [rating, setRating] = React.useState(null);

  return (
    &lt;div&gt;
      Example
      &lt;Rating
        name=&quot;rating&quot;
        size=&quot;large&quot;
        value={rating}
        onChange={(event, newValue) =&gt; {
          console.log(`change rating: ${newValue}`);

          setRating(newValue);
        }}
      /&gt;
    &lt;/div&gt;
  );
}

ReactDOM
    .unstable_createBlockingRoot(document.querySelector('#app'), {
        hydrate: false,
    })
    .render(
        &lt;App /&gt;
    )
;"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">React</span> <span class="pl-k">from</span> <span class="pl-s">"react"</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-v">Rating</span> <span class="pl-k">from</span> <span class="pl-s">"@material-ui/lab/Rating"</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-s">"./styles.css"</span><span class="pl-kos">;</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-k">function</span> <span class="pl-v">App</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-kos">[</span><span class="pl-s1">rating</span><span class="pl-kos">,</span> <span class="pl-s1">setRating</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-en">useState</span><span class="pl-kos">(</span><span class="pl-c1">null</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>
      Example
      <span class="pl-c1">&lt;</span><span class="pl-ent">Rating</span>
        <span class="pl-c1">name</span><span class="pl-c1">=</span><span class="pl-s">"rating"</span>
        <span class="pl-c1">size</span><span class="pl-c1">=</span><span class="pl-s">"large"</span>
        <span class="pl-c1">value</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">rating</span><span class="pl-kos">}</span>
        <span class="pl-c1">onChange</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">(</span><span class="pl-s1">event</span><span class="pl-kos">,</span> <span class="pl-s1">newValue</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
          <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">`change rating: <span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">newValue</span><span class="pl-kos">}</span></span>`</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

          <span class="pl-s1">setRating</span><span class="pl-kos">(</span><span class="pl-s1">newValue</span><span class="pl-kos">)</span><span class="pl-kos">;</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">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-v">ReactDOM</span>
    <span class="pl-kos">.</span><span class="pl-en">unstable_createBlockingRoot</span><span class="pl-kos">(</span><span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">querySelector</span><span class="pl-kos">(</span><span class="pl-s">'#app'</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
        <span class="pl-c1">hydrate</span>: <span class="pl-c1">false</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-c1">&lt;</span><span class="pl-ent">App</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
    <span class="pl-kos">)</span>
<span class="pl-kos">;</span></pre></div>
<h1 dir="auto">Live Example</h1>
<p dir="auto"><a href="https://codesandbox.io/s/immutable-cloud-h3k2m?file=/src/App.js" rel="nofollow">https://codesandbox.io/s/immutable-cloud-h3k2m?file=/src/App.js</a></p>
<h1 dir="auto">Video (describe where is a bug)</h1>
<p dir="auto"><a href="https://www.youtube.com/watch?v=-jWTXdaIA6Y&amp;t=1s" rel="nofollow">https://www.youtube.com/watch?v=-jWTXdaIA6Y&amp;t=1s</a></p>
<h2 dir="auto">The current behavior</h2>
<p dir="auto">It's needed to click 2 times before <code class="notranslate">onChange</code> will be fired</p>
<h2 dir="auto">The expected behavior</h2>
<p dir="auto">Should works as expected as it's working in legacy mode</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="ReactDOM.hydrate(
    &lt;App /&gt;,
    document.querySelector('#app') as HTMLDivElement
);"><pre class="notranslate"><span class="pl-v">ReactDOM</span><span class="pl-kos">.</span><span class="pl-en">hydrate</span><span class="pl-kos">(</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">App</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">,</span>
    <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">querySelector</span><span class="pl-kos">(</span><span class="pl-s">'#app'</span><span class="pl-kos">)</span> <span class="pl-s1">as</span> <span class="pl-v">HTMLDivElement</span>
<span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Thanks</p>
<p dir="auto">React version: I think any experimental version.<br>
Tested using:</p>
<ul dir="auto">
<li><code class="notranslate">0.0.0-experimental-5faf377df</code> and</li>
<li><code class="notranslate">0.0.0-experimental-e5d06e34b</code> at least.</li>
</ul>
<h2 dir="auto">Steps To Reproduce</h2>
<ol dir="auto">
<li>Open CodeSandbox: <a href="https://codesandbox.io/s/createroot-broken-focus-onchange-ysrut?file=/src/App.js" rel="nofollow">https://codesandbox.io/s/createroot-broken-focus-onchange-ysrut?file=/src/App.js</a></li>
<li>Attempt to click on the label text for the checkbox in the createRoot section</li>
<li>Notice that the checkbox <strong>won't</strong> check - <code class="notranslate">onChange</code> isn't called</li>
<li>Attempt to click on the label text for the checkbox in the render section</li>
<li>Notice that the checkbox <strong>will</strong> check - <code class="notranslate">onChange</code> is called</li>
</ol>

<p dir="auto">Link to code example: <a href="https://codesandbox.io/s/createroot-broken-focus-onchange-ysrut?file=/src/App.js" rel="nofollow">https://codesandbox.io/s/createroot-broken-focus-onchange-ysrut?file=/src/App.js</a></p>

<h2 dir="auto">The current behavior</h2>
<p dir="auto">When rendering using <code class="notranslate">createRoot</code>:</p>
<ul dir="auto">
<li><code class="notranslate">onFocus</code> is called</li>
<li><code class="notranslate">onChange</code> <strong>is not</strong> called</li>
</ul>
<p dir="auto">When rendering using <code class="notranslate">render</code>:</p>
<ul dir="auto">
<li><code class="notranslate">onFocus</code> is called</li>
<li><code class="notranslate">onChange</code> <strong>is</strong> called</li>
</ul>
<p dir="auto">My coworker and I spent a bit of time debugging this, if we at all schedule the <code class="notranslate">onFocus</code> setState handler (using <code class="notranslate">setTimeout</code>, or <code class="notranslate">requestAnimationFrame</code> for example), then <code class="notranslate">onChange</code> is always called from the input.</p>
<p dir="auto">e.g.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="handleFocus = () =&gt; {
  setTimeout(() =&gt; this.setState({ isHovered: true }), 0)
  // or
  requestAnimationFrame(() =&gt; this.setState({ isHovered: true }))
}"><pre class="notranslate"><span class="pl-en">handleFocus</span> <span class="pl-c1">=</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-en">setTimeout</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">setState</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">isHovered</span>: <span class="pl-c1">true</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-c1">0</span><span class="pl-kos">)</span>
  <span class="pl-c">// or</span>
  <span class="pl-en">requestAnimationFrame</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">setState</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">isHovered</span>: <span class="pl-c1">true</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">)</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">Additionally, if the label is a sibling to the input:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="return (
  &lt;&gt;
    &lt;input id=&quot;id&quot; onChange={} type=&quot;checkbox&quot; checked={} /&gt;
    &lt;label htmlFor=&quot;id&quot; onFocus={}&gt;
      label text
    &lt;/label&gt;
  &lt;/&gt;
)"><pre class="notranslate"><span class="pl-k">return</span> <span class="pl-kos">(</span>
  <span class="pl-c1">&lt;</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">input</span> <span class="pl-c1">id</span><span class="pl-c1">=</span><span class="pl-s">"id"</span> <span class="pl-c1">onChange</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">}</span> <span class="pl-c1">type</span><span class="pl-c1">=</span><span class="pl-s">"checkbox"</span> <span class="pl-c1">checked</span><span class="pl-c1">=</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-ent">label</span> <span class="pl-c1">htmlFor</span><span class="pl-c1">=</span><span class="pl-s">"id"</span> <span class="pl-c1">onFocus</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
      label text
    <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">label</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
<span class="pl-kos">)</span></pre></div>
<p dir="auto">then the <code class="notranslate">onChange</code> handler <strong>will</strong> be called as well (Note: <code class="notranslate">onFocus</code> <strong>won't</strong> be called in this case because there isn't a focusable element within it).</p>
<p dir="auto">Also worth noting, re-implementing the checkbox component using hooks will still run into the same bug - no differences between using classes vs hooks.</p>
<h2 dir="auto">The expected behavior</h2>
<p dir="auto">Calling <code class="notranslate">setState</code> in <code class="notranslate">onFocus</code> <strong>shouldn't</strong> prevent <code class="notranslate">onChange</code> on a nested input element to be called. Both <code class="notranslate">onFocus</code> and <code class="notranslate">onChange</code> should be called.</p>