Flush continuous updates in the capture phase of a discrete event

[tyao1]

Summary

If there is a click event following a series of mouse over events, we want the callback in the click event to be able to read the latest states set by mouse over.

How did you test this change?

yarn test

[sebmarkbage]

This is too late because the changes we're flushing could have affected the things you read above here. E.g. the target could've been removed.

However, I think technically, all our events are too late because I believe that we only attach the listeners at the React root. For example, if a user space event listener attached in a useEffect is listening to a parent above the React root like the document, then that thing should probably observe it too even though it's dispatched before the capture of the React root.

I think this is already a problem for selective hydration too.

Keep in mind that this whole synthetic event system is on its way out and so anything that relies on it won't keep working. Instead, think of all events being dispatched through the native DOM events and how that would work.

As a result, I would recommend not trying to fit this into the existing event system but instead add your own event listeners that do this flushing. That way this is kept separate and this is not deleted when we delete the rest of the synthetic event system.

E.g. here you could listen at the DOM root.

https://github.com/facebook/react/blob/main/packages/react-dom/src/client/ReactDOMRoot.js#L256

Float already has a concept of figuring out the root of the document outside the React root.

https://github.com/facebook/react/blob/main/packages/react-dom-bindings/src/client/ReactDOMFloatClient.js#L193

[tyao1]

Thanks for the context and code pointers!

[shreya-as]

<--!test -->
test

[sennymunoz]

Realy