1763669 - beforeinput event of React is not fired with MacOS accent popup selection

Status: RESOLVED WORKSFORME

(Core :: DOM: UI Events & Focus Handling, defect, P3)

Description

[broomerjack]

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

Comment 1

[broomerjack]

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.

Comment 2

[BugBot [:suhaib / :marco]]

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.

Comment 3

[Hsin-Yi Tsai (she/her) | away [:hsinyi]]

It works for me on Win11.

Comment 4

[broomerjack]

Attachment: MacOS Popup Example

This is an example of the MacOS popup

Comment 5

[broomerjack]

Attachment: Accent Input Event

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

Comment 6

[broomerjack]

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.

Comment 7

[Masayuki Nakano [:masayuki] (he/him)(JST, +0900)]

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

Comment 8

[broomerjack]

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.

Comment 9

[Hsin-Yi Tsai (she/her) | away [:hsinyi]]

(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?

Comment 10

[Masayuki Nakano [:masayuki] (he/him)(JST, +0900)]

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...

Comment 11

[Masayuki Nakano [:masayuki] (he/him)(JST, +0900)]

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.

Comment 12

[Masayuki Nakano [:masayuki] (he/him)(JST, +0900)]

At least, the test case looks like working fine right now. If you think the inputType is a bug of Gecko, feel free to file a new bug.