<p dir="auto">React version: 17.0.2</p>
<h2 dir="auto">Steps To Reproduce</h2>
<p dir="auto">I've spend hours on this thing suspecting my code being the bad actor because it was quite complex, but I nailed it down with a help of my friend and it seems like in some cases the <code class="notranslate">key</code> prop in array <em>must</em> be first, otherwise <code class="notranslate">props.children</code> become <code class="notranslate">[undefined, false, undefined, undefined]</code>.</p>
<p dir="auto">I have a <a href="https://github.com/sznowicki/repro-react-missing-children">repro repo</a> so you can check it out yourself, but here's some small step by step explanation.</p>
<ol dir="auto">
<li>We need a component that wraps children:</li>
</ol>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const WrapperWhereMagicHappens = (props) =&gt; {
    console.log('wrapper props', props)
    return (
        &lt;div&gt;{props.children}&lt;/div&gt;
    )
}"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-v">WrapperWhereMagicHappens</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-s1">props</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">'wrapper props'</span><span class="pl-kos">,</span> <span class="pl-s1">props</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-kos">{</span><span class="pl-s1">props</span><span class="pl-kos">.</span><span class="pl-c1">children</span><span class="pl-kos">}</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></pre></div>
<ol start="2" dir="auto">
<li>Then another one that uses it, with props spread.</li>
</ol>
<p dir="auto">It maps an array and renders those wrappers spreading some props. Mind the key here is in the end. This one is the troublemaker.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const ChildrenFail = (props) =&gt; {
    return array.map((label) =&gt; (
        &lt;WrapperWhereMagicHappens
            {...props}
            key={label}
        &gt;
            &lt;h2&gt;{label}&lt;/h2&gt;
            &lt;div&gt;
                {console.log(props.children) || props.children}
            &lt;/div&gt;
        &lt;/WrapperWhereMagicHappens&gt;
    ))
};"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-v">ChildrenFail</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-s1">props</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-s1">array</span><span class="pl-kos">.</span><span class="pl-en">map</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">label</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">WrapperWhereMagicHappens</span>
            <span class="pl-kos">{</span>...<span class="pl-s1">props</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">label</span><span class="pl-kos">}</span>
        <span class="pl-c1">&gt;</span>
            <span class="pl-c1">&lt;</span><span class="pl-ent">h2</span><span class="pl-c1">&gt;</span><span class="pl-kos">{</span><span class="pl-s1">label</span><span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">h2</span><span class="pl-c1">&gt;</span>
            <span class="pl-c1">&lt;</span><span class="pl-ent">div</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-s1">props</span><span class="pl-kos">.</span><span class="pl-c1">children</span><span class="pl-kos">)</span> <span class="pl-c1">||</span> <span class="pl-s1">props</span><span class="pl-kos">.</span><span class="pl-c1">children</span><span class="pl-kos">}</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-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">WrapperWhereMagicHappens</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>
<p dir="auto">If we put the key to the beginning, so before the props spread like this, all works fine.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const ChildrenOK = (props) =&gt; {
    return array.map((label) =&gt; (
        &lt;WrapperWhereMagicHappens
            key={label}
            {...props}
        &gt;
            &lt;h2&gt;{label}&lt;/h2&gt;
            &lt;div&gt;
                {console.log(props.children) || props.children}
            &lt;/div&gt;
        &lt;/WrapperWhereMagicHappens&gt;
    ))
};"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-v">ChildrenOK</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-s1">props</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-s1">array</span><span class="pl-kos">.</span><span class="pl-en">map</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">label</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">WrapperWhereMagicHappens</span>
            <span class="pl-c1">key</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">label</span><span class="pl-kos">}</span>
            <span class="pl-kos">{</span>...<span class="pl-s1">props</span><span class="pl-kos">}</span>
        <span class="pl-c1">&gt;</span>
            <span class="pl-c1">&lt;</span><span class="pl-ent">h2</span><span class="pl-c1">&gt;</span><span class="pl-kos">{</span><span class="pl-s1">label</span><span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">h2</span><span class="pl-c1">&gt;</span>
            <span class="pl-c1">&lt;</span><span class="pl-ent">div</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-s1">props</span><span class="pl-kos">.</span><span class="pl-c1">children</span><span class="pl-kos">)</span> <span class="pl-c1">||</span> <span class="pl-s1">props</span><span class="pl-kos">.</span><span class="pl-c1">children</span><span class="pl-kos">}</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-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">WrapperWhereMagicHappens</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>
<p dir="auto">Now, render:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="
const App = () =&gt; {
    return (
        &lt;&gt;
            &lt;ChildrenFail foo={1} bar={2}&gt;
                &lt;p&gt;I'm a child&lt;/p&gt;
            &lt;/ChildrenFail&gt;
            &lt;ChildrenOK foo={1} bar={2}&gt;
                &lt;p&gt;I'm a child&lt;/p&gt;
            &lt;/ChildrenOK&gt;
        &lt;/&gt;

    )
}"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-v">App</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-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">ChildrenFail</span> <span class="pl-c1">foo</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">1</span><span class="pl-kos">}</span> <span class="pl-c1">bar</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">2</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
                <span class="pl-c1">&lt;</span><span class="pl-ent">p</span><span class="pl-c1">&gt;</span>I'm a child<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">p</span><span class="pl-c1">&gt;</span>
            <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">ChildrenFail</span><span class="pl-c1">&gt;</span>
            <span class="pl-c1">&lt;</span><span class="pl-ent">ChildrenOK</span> <span class="pl-c1">foo</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">1</span><span class="pl-kos">}</span> <span class="pl-c1">bar</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">2</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
                <span class="pl-c1">&lt;</span><span class="pl-ent">p</span><span class="pl-c1">&gt;</span>I'm a child<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">p</span><span class="pl-c1">&gt;</span>
            <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">ChildrenOK</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>
<span class="pl-kos">}</span></pre></div>
<h2 dir="auto">The current behavior</h2>
<p dir="auto">The <code class="notranslate">console.log(props.children)</code> from <code class="notranslate">ChildrenOK</code> and <code class="notranslate">ChildrenFail</code> prints react <code class="notranslate">Symbol</code> in all cases, which is expected.</p>
<p dir="auto">The console.log in the <code class="notranslate">WrapperWhereMagicHappens</code> prints children as array of <code class="notranslate">undefined, false, undefined, undefined</code> (always this exact thing when <code class="notranslate">key</code> is being passed in the end</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;WrapperWhereMagicHappens
            {...props}
            key={label}
        &gt;"><pre class="notranslate"><span class="pl-c1">&lt;</span><span class="pl-ent">WrapperWhereMagicHappens</span>
            <span class="pl-kos">{</span>...<span class="pl-s1">props</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">label</span><span class="pl-kos">}</span>
        <span class="pl-c1">&gt;</span></pre></div>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/3393569/155396774-9584539e-ac4d-41bc-892a-8835cda7ad01.png"><img width="674" alt="Zrzut ekranu 2022-02-23 o 20 47 03" src="https://user-images.githubusercontent.com/3393569/155396774-9584539e-ac4d-41bc-892a-8835cda7ad01.png" style="max-width: 100%;"></a></p>
<p dir="auto">When it's passed first, it's doesn't replace <code class="notranslate">props.children</code><br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/3393569/155396850-f10695b7-65e8-4b34-88c2-e332c8d5f630.png"><img width="753" alt="Zrzut ekranu 2022-02-23 o 20 47 17" src="https://user-images.githubusercontent.com/3393569/155396850-f10695b7-65e8-4b34-88c2-e332c8d5f630.png" style="max-width: 100%;"></a></p>
<p dir="auto">Meaning: <em><strong>When there is a props spread and following <code class="notranslate">key</code> children will never render</strong></em></p>
<h2 dir="auto">The expected behavior</h2>
<p dir="auto">Children should not be replaced by something when <code class="notranslate">key</code> is defined in the end, after spread.</p>
<p dir="auto">First I thought maybe there's some <code class="notranslate">Object</code> property that I don't know and it's called <code class="notranslate">children</code> (didn't found one), so I thought, OK, let's define what keys can go to the spread and make sure there is nothing overwriting <code class="notranslate">children</code></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="        &lt;WrapperWhereMagicHappens
            {
                ...['foo', 'bar'].reduce((acc, curr) =&gt; {
                    acc[curr] = props[curr];
                    return acc;
                }, {})
            }
            key={label}
        &gt;"><pre class="notranslate">        <span class="pl-c1">&lt;</span><span class="pl-ent">WrapperWhereMagicHappens</span>
            <span class="pl-kos">{</span>
                ...<span class="pl-kos">[</span><span class="pl-s">'foo'</span><span class="pl-kos">,</span> <span class="pl-s">'bar'</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-en">reduce</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">acc</span><span class="pl-kos">,</span> <span class="pl-s1">curr</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
                    <span class="pl-s1">acc</span><span class="pl-kos">[</span><span class="pl-s1">curr</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-s1">props</span><span class="pl-kos">[</span><span class="pl-s1">curr</span><span class="pl-kos">]</span><span class="pl-kos">;</span>
                    <span class="pl-k">return</span> <span class="pl-s1">acc</span><span class="pl-kos">;</span>
                <span class="pl-kos">}</span><span class="pl-kos">,</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">key</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">label</span><span class="pl-kos">}</span>
        <span class="pl-c1">&gt;</span></pre></div>
<p dir="auto">But still no luck. When there's spread and then <code class="notranslate">key</code>, <code class="notranslate">props.children</code> always become that mysterious Array of four elements.</p>
<p dir="auto">I'm also super curious why this happens anyway, I'd appreciate any support and details.</p>
<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong><br>
<em>bug</em></p>
<p dir="auto"><strong>What is the current behavior?</strong><br>
The <code class="notranslate">dispatchEvent</code> method has no effect on input/textarea elements.</p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via <a href="https://jsfiddle.net" rel="nofollow">https://jsfiddle.net</a> or similar (template: <a href="https://jsfiddle.net/84v837e9/" rel="nofollow">https://jsfiddle.net/84v837e9/</a>).</strong><br>
v. 15.5.4: <a href="https://jsfiddle.net/c8tp5mqf/" rel="nofollow">https://jsfiddle.net/c8tp5mqf/</a> (working)<br>
v. 15.6.1: <a href="https://jsfiddle.net/6bv1581z/" rel="nofollow">https://jsfiddle.net/6bv1581z/</a> (not working)</p>
<p dir="auto"><strong>What is the expected behavior?</strong><br>
The <code class="notranslate">dispatchEvent</code> method results in an event being handled.</p>
<p dir="auto"><strong>Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?</strong><br>
I'm using the latest Chrome browser. This has worked in 15.5.x, stopped working in 15.6.0 and is still not working in 15.6.1.</p>
<hr>
<p dir="auto">Usecase for this: some old tests that I'd happily remove, but have to support for now.</p>