Fire change events for changes made to inputs before hydration

[aweary]

Currently when hydrating server-rendered markup we ignore changes the user makes before hydration. We also don't reset their changes once hydration finishes. The motivation there was likely to avoid losing user input. See this test:

https://github.com/facebook/react/blob/master/packages/react-dom/src/__tests__/ReactDOMServerIntegrationForms-test.js#L543-L552

The problem with that is that it assumes the value will continue to be changed after hydration completes (e.g., a user keeps typing). If they don't, then the DOM and React will be out of sync.

We should try to detect if there have been any changes made to an input when hydrating, and if so dispatch a change event so that the component is notified of the new value.

See #12939 for some more discussion.

[asiniy]

It's promising to be extremely difficult to me, but I'm taking this one

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contribution.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!

[joliss]

@acdlite I was wondering if it could be worth reopening this issue? This is still a problem for me on the latest React 18.2.0, when hydrating a component with an <input> field via Next.js.

[jnicklas]

This is still an issue in 2024. Would be great to reopen this issue.

[Rakhymbek]

Please, reopen this issue.
Problem with editing input before hydration happens.