Bug 166889 - beforeinput events should fire before compositionupdate events while editing a composition
Summary: beforeinput events should fire before compositionupdate events while editing ...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: UI Events (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: BrowserCompat, InRadar
Depends on:
Blocks:
 
Reported: 2017-01-10 08:52 PST by Wenson Hsieh
Modified: 2024-03-21 17:28 PDT (History)
4 users (show)

See Also:


Attachments
beforeinput and composition events logging (848 bytes, text/html)
2024-03-21 00:17 PDT, Karl Dubost
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Wenson Hsieh 2017-01-10 08:52:08 PST
Currently, we fire `compositionupdate` and then `beforeinput`, rather than vice versa.
Comment 1 Karl Dubost 2024-03-20 20:07:45 PDT
I need to create a testcase for this.
Comment 2 Karl Dubost 2024-03-21 00:17:02 PDT
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: 'é',
Comment 3 Radar WebKit Bug Importer 2024-03-21 00:17:33 PDT
<rdar://problem/125146996>
Comment 4 Karl Dubost 2024-03-21 01:26:24 PDT
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.
Comment 5 Karl Dubost 2024-03-21 17:28:37 PDT
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