Issue 1:
React version: 17.0.2

Steps To Reproduce

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 key prop in array must be first, otherwise props.children become [undefined, false, undefined, undefined].

I have a repro repo so you can check it out yourself, but here's some small step by step explanation.

We need a component that wraps children:

const WrapperWhereMagicHappens = (props) => {
console.log('wrapper props', props)
return (
<div>{props.children}</div>
)
}

Then another one that uses it, with props spread.

It maps an array and renders those wrappers spreading some props. Mind the key here is in the end. This one is the troublemaker.

const ChildrenFail = (props) => {
return array.map((label) => (
<WrapperWhereMagicHappens
{...props}
key={label}
>
<h2>{label}</h2>
<div>
{console.log(props.children) || props.children}
</div>
</WrapperWhereMagicHappens>
))
};

If we put the key to the beginning, so before the props spread like this, all works fine.

const ChildrenOK = (props) => {
return array.map((label) => (
<WrapperWhereMagicHappens
key={label}
{...props}
>
<h2>{label}</h2>
<div>
{console.log(props.children) || props.children}
</div>
</WrapperWhereMagicHappens>
))
};

Now, render:

const App = () => {
return (
<>
<ChildrenFail foo={1} bar={2}>
<p>I'm a child</p>
</ChildrenFail>
<ChildrenOK foo={1} bar={2}>
<p>I'm a child</p>
</ChildrenOK>
</>

)
}

The current behavior

The console.log(props.children) from ChildrenOK and ChildrenFail prints react Symbol in all cases, which is expected.

The console.log in the WrapperWhereMagicHappens prints children as array of undefined, false, undefined, undefined (always this exact thing when key is being passed in the end

<WrapperWhereMagicHappens
{...props}
key={label}
>

When it's passed first, it's doesn't replace props.children

Meaning: When there is a props spread and following key children will never render

The expected behavior

Children should not be replaced by something when key is defined in the end, after spread.

First I thought maybe there's some Object property that I don't know and it's called children (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 children

<WrapperWhereMagicHappens
{
...['foo', 'bar'].reduce((acc, curr) => {
acc[curr] = props[curr];
return acc;
}, {})
}
key={label}
>

But still no luck. When there's spread and then key, props.children always become that mysterious Array of four elements.

I'm also super curious why this happens anyway, I'd appreciate any support and details.

Issue 2:
Do you want to request a feature or report a bug?

bug

What is the current behavior?

The dispatchEvent method has no effect on input/textarea elements.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: https://jsfiddle.net/84v837e9/).

v. 15.5.4: https://jsfiddle.net/c8tp5mqf/ (working)

v. 15.6.1: https://jsfiddle.net/6bv1581z/ (not working)

What is the expected behavior?

The dispatchEvent method results in an event being handled.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

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.

Usecase for this: some old tests that I'd happily remove, but have to support for now.