There is a strange React bug where the beforeinput event does not fire but only on Firefox (v99).

React version: 17.0.2

Steps To Reproduce

There are two ways I have found to reproduce this bug and both involve a scenario where the beforeInput event is replacing the previous text and both are only problematic on Firefox when the events are triggered via React rendered input.

MacOS Popup

1. (Using MacOS (v12.1) and a Firefox browser). When focused in a browser input, hold down the "a" key (or any standard english character with a latin accented variation) and wait for the accent popup to show up
2. At this point the keydown, beforeinput, and input events should have fired and the new input should have the regular key inserted
3. Now, select one of the options from the accent menu (using a numeric selector)
4. Notice only the keydown and input events fired

Native HTML Spellcheck Replacement

1. (Using a Firefox browser) When focused in a browser input, type some misspelled text in so that it can be selected for spellcheck replacement
2. Notice all of the keydown, beforeinput, and input events fire when typing standard keys
3. Right click on the misspelled text and select a spellcheck alternative
4. Notice only the input event fires with the replacement input

Link to code example:

Here is a simple codesandbox with a Standard HTML textarea and a textarea rendered via React. It logs to the console when the events fire. If you run through either one of the above steps to reproduce, you'll notice the beforeinput event fires correctly with the standard HTML element but not with the React rendered input.

Code Sandbox

The current behavior

Only the keydown and input events fired when a replacement text input event flow is triggered

The expected behavior

The beforeinput event should always fire