Bug 166889 – beforeinput events should fire before compositionupdate events while editing a composition

• Status: NEW
• Component: UI Events

[Wenson Hsieh]

Currently, we fire `compositionupdate` and then `beforeinput`, rather than vice versa.

[Karl Dubost]

I need to create a testcase for this.

[Karl Dubost]

Created attachment 470454 [details]
beforeinput and composition events logging

Steps to Reproduce:
1. load the testcase
2. Open the devtools on the console
3. focus In the textarea 
4. Type Option + e
5. Release 
6. Type e

Result: 
é

Check the order of events for each browser.

Tested with 
Safari                     17.4          19618.1.14.11.1
Firefox Nightly            125.0a1       12524.3.12
Google Chrome Canary       125.0.6369.0  6369.0


Safari:
compositionstart  CompositionEvent {data: "",   initCompositionEvent: function, 
compositionupdate CompositionEvent {data: "´",  initCompositionEvent: function
beforeinput       InputEvent       {data: "´",  inputType: "insertCompositionText", 
beforeinput       InputEvent       {data: null, inputType: "deleteCompositionText"
beforeinput       InputEvent       {data: "é",  inputType: "insertFromComposition"
compositionend    CompositionEvent {data: "é",  initCompositionEvent: function


Firefox:
compositionstart  compositionstart  {data: ""
compositionupdate compositionupdate {data: "´"
beforeinput       beforeinput       {data: "´", isComposing: true, inputType: "insertCompositionText"
compositionupdate compositionupdate {data: "é"
beforeinput       beforeinput       {data: "é", isComposing: true, inputType: "insertCompositionText"
compositionend    compositionend    {data: "é" 


Chrome: 
compositionstart  CompositionEvent {data: ''
compositionupdate CompositionEvent {data: '´'
beforeinput       InputEvent       {data: '´', isComposing: true, inputType: 'insertCompositionText'
compositionupdate CompositionEvent {data: 'é', 
beforeinput       InputEvent       {data: 'é', isComposing: true, inputType: 'insertCompositionText'
compositionend    CompositionEvent {data: 'é',

[Radar WebKit Bug Importer]

<rdar://problem/125146996>

[Karl Dubost]

the 3 engines seem to fire beforeinput after compositionupdate, 

but Safari is sending
beforeinput       InputEvent       {data: null, inputType: "deleteCompositionText"

while Firefox and Chrome are firing
compositionupdate compositionupdate {data: "é"

So the order maybe is solved and this becomes a separate issue.

[Karl Dubost]

As of today, the current spec specifies the order of the event in 
https://w3c.github.io/uievents/#events-composition-input-events


5.7.6. Input Events During Composition

During the composition session, the compositionupdate MUST be dispatched after the beforeinput is sent, but before the input event is sent.

Event Type	Notes
1	beforeinput	
2	compositionupdate	
                           Any DOM updates occur at this point.
3	input	

Note: Most IMEs do not support canceling updates during a composition session.

The beforeinput and input events are sent along with the compositionupdate event whenever the DOM is updated as part of the composition. Since there are no DOM updates associated with the compositionend event, beforeinput and input events should not be sent at that time.

Event Type	Notes
1	beforeinput	   Canceling this will prevent the DOM update and the input event.
2	compositionupdate	
                           Any DOM updates occur at this point.
3	input	           Sent only if the DOM was updated.
4	compositionend