Bug: onChange event is fired twice when replacing selected text

[perenstrom]

React version: 17.0.1

Steps To Reproduce

1. Add an onChange handler to an input[type=text] field, logging the event.target.value
2. Write a letter in the input (see that it fires an event)
3. Select all text
4. Type a new letter, thus replacing the previous letter
5. This will trigger two events on some device setups, one with blank input, and one with the new letter.

Link to code example: https://codesandbox.io/s/react-input-event-twice-4dh59

The current behavior

On some devices the replacement of a selection fires twice, first with empty input and second with the typed letter.

The expected behavior

Only one input event should be fired, with the new letter.

Devices/browsers tested:

Two events (bug):

• OnePlus 5, Android OxygenOS 9.0.9, Chrome 87.0.4280.101
• OnePlus 3T, Android OxygenOS 9.0.6, Chrome 87.0.4280.101

One events (working as intended):

• MacOS 10.14.6, Firefox 83.0
• MacOS 10.14.6, Chrome 87.0.4280.88
• iPhone X, iOS 14.2, Chrome 87.0.4280.77
• Pixel 2, Android 8.0.0, Chrome 87.0.4280.101 (however this test person experienced the bug earlier, but might have been an in app browser somewhere)

Related:

• IE10 triggers onChange twice when replacing a text selection  #8531 IE10 triggers onChange twice when replacing a text selection

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions]

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!