Steps to reproduce:

1. Using MacOS (v12.1), 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 and beforeinput events will have fired and the input should have the regular key inserted
3. Select one of the options from the accent menu

Simple CodeSandbox: https://codesandbox.io/s/react-typescript-forked-wh6no9?file=/src/App.tsx

Actual results:

Observe that the keydown and input events fire but not the beforeinput event

Expected results:

I would have expected the beforeinput event to have fired

It's also worth mentioning that I would expect the beforeInput and input events to fire with the inputType of insertReplacementText on selecting a character from the accent popup because it does replace the previous character.

The Bugbug bot thinks this bug should belong to the 'Core::DOM: UI Events & Focus Handling' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

It works for me on Win11.

This is an example of the MacOS popup

I am seeing the beforeInput and input events here however, I would have expected the inputType to be insertReplacementText.

Hi Hsin, maybe there was some confusion but this bug is MacOS specific because Windows doesn't have the same accent popup menu. I added screenshots above to hopefully clear things up a bit.

I don't reproduce this with raw DOM event. So this could be a bug of React (or the testcase).

Okay, I'll have to do some more digging into that on my end. What about the other issue:

It's also worth mentioning that I would expect the beforeInput and input events to fire with the inputType of insertReplacementText on selecting a character from the accent popup because it does replace the previous character.

(In reply to broomerjack from comment #8)

Okay, I'll have to do some more digging into that on my end. What about the other issue:

It's also worth mentioning that I would expect the beforeInput and input events to fire with the inputType of insertReplacementText on selecting a character from the accent popup because it does replace the previous character.

Masayuki, do you have thoughts for above?

Indeed, Chrome dispatches beforeinput event with inputType="insertReplacementText" in the case. However, I don't have much time to work on this bug at least in this month...

Oh, if I enable textInput with the pref dom.events.textevent.enabled, beforeinput event also appears in the test case. So, it's a bug of React.

I think that insertReplacementText should be handled in a new bug.