Currently, we fire `compositionupdate` and then `beforeinput`, rather than vice versa.
I need to create a testcase for this.
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: 'é',
<rdar://problem/125146996>
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.
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