Bug: beforeInput event doesn't fire when input is replacing previous text

[jbroomer]

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

[jeremyscatigna]

👋 Could have a look on this one if possible

[gaearon]

Sure.

[blyncnov]

Looking into that before notice

[juank1809]

Is this issue still available? I'd like to to take a look into it if possible :)

[Dayasagar543]

hi there is the issue resloved or still there can you assign me the task if in case not done

[Ali7040]

Hello! I'm interested in contributing to this project and would love to work on this issue. If this issue is still open, please consider assigning it to me. I'm excited to get started and contribute to the project. Thank you!

[dalalsoham]

I am interested in contributing to this project and would love to work on this issue. If this issue is still open please assigning it to me if possible.

[Deeppjp116]

beforeInput event fails to trigger during text replacement. Requesting a fork to investigate and fix the issue. Eager to contribute to the project and ensure seamless functionality. Thank you!

[Ankuristic]

I am interested in contributing to this project and would love to work on this issue. If this issue is still open please assigning it to me if possible.

[CodeByFatemeh]

Hi, I am curious to know if this issue is still open or has been resolved. If it's still unresolved, I would like to contribute towards fixing it.

[HitenChawda46]

@gaearon I have tried to fix this issue, here's my open PR: https://github.com/facebook/react/pull/31970 Please kindly review when you get chance and let me know if there is anything more I need to do. Appreciate your guidance, Thanks! cc: @jbroomer @eps1lon

[YeezyWest]

Hi! I'd like to work on this issue.

Plan:

Reproduce the bug in a minimal test case.

Investigate how beforeInput is handled during text replacement.

Check if this is a React synthetic event issue or native behavior.

Patch the event dispatching logic if needed and add regression tests.

Why me: I have experience debugging event systems and have contributed to similar issues involving input and DOM behavior. I’ll ensure the fix is thorough and tested. Looking forward to contributing!