Scenario

insertFromComposition and getTargetRanges() for IME commits

When composition ends, beforeinput may use inputType insertFromComposition or insertCompositionText. getTargetRanges() should describe the range to replace; on Safari (especially iOS) or with certain IMEs, ranges may be missing, wrong, or inconsistent with desktop Safari—breaking editors that rely on target ranges for transactions.

ime

Scenario ID

scenario-ime-insertfromcomposition-targetranges

Edit on GitHub

Details

When composition ends, beforeinput may use inputType insertFromComposition or insertCompositionText. getTargetRanges() should describe the range to replace; on Safari (especially iOS) or with certain IMEs, ranges may be missing, wrong, or inconsistent with desktop Safari—breaking editors that rely on target ranges for transactions.

Problem Overview

Input Events recommend getTargetRanges() for knowing what DOM will change. IME commit paths are the least uniform across engines.

Observed Behavior

Desktop Safari vs iOS Safari: Korean/Japanese may omit or mis-scope ranges compared to Chrome.
insertFromComposition fires without overlapping compositionend in some stacks—ordering matters.

Impact

Wrong character replacement, cursor jumps, or ProseMirror/Slate transactions applied to the wrong positions.

Browser Comparison

WebKit mobile vs desktop; contrast with Chromium’s behavior for the same IME.

Solutions

Fall back to getSelection().getRangeAt(0) when getTargetRanges() is empty—validate range still in editor.
Debounce structural updates until after compositionend if ranges are flaky.

References

Scenario flow

Visual view of how this scenario connects to its concrete cases and environments. Nodes can be dragged and clicked.

Variants

Each row is a concrete case for this scenario, with a dedicated document and playground.

Case	OS	Device	Browser	Keyboard	Status
ce-0214-ime-insertfromcomposition-targetranges-desktop-safari-korean	macOS 14.0+	Desktop or Laptop Any	Safari 17.0+	Korean (IME)	draft
ce-0215-ime-insertfromcomposition-targetranges-ios-safari-japanese	iOS 17.0+	iPhone or iPad Any	Safari 17.0+	Japanese (IME)	draft
ce-0216-ime-insertfromcomposition-missing-ios-safari-korean	iOS 17.0+	iPhone or iPad Any	Safari 17.0+	Korean (IME)	draft

Browser compatibility

This matrix shows which browser and OS combinations have documented cases for this scenario. Click on a cell to view the specific case.

Browser	iOS	macOS
Safari	ce-0215-ime-insertfromcomposition-targetranges-ios-safari-japanese ce-0216-ime-insertfromcomposition-missing-ios-safari-korean 17.0+, 17.0+	ce-0214-ime-insertfromcomposition-targetranges-desktop-safari-korean 17.0+

Confirmed

Draft

— No case documented

Cases

This scenario affects multiple languages. Cases are grouped by language/input method below.

Japanese

1 case

insertFromComposition targetRanges are collapsed and need recalculation in iOS Safari

OS: iOS 17.0+ · Device: iPhone or iPad Any · Browser: Safari 17.0+

Open case →

Korean

2 cases

insertFromComposition targetRanges should be trusted even when collapsed in Desktop Safari

OS: macOS 14.0+ · Device: Desktop or Laptop Any · Browser: Safari 17.0+

Open case →

insertFromComposition does not fire in iOS Safari with Korean IME

OS: iOS 17.0+ · Device: iPhone or iPad Any · Browser: Safari 17.0+

Open case →

Related Scenarios

Other scenarios that share similar tags or category.

Tags: ime, beforeinput, safari, ios

Duplicate beforeinput or input events during IME composition

Some browsers and keyboards emit duplicate composition-related input or beforeinput events—especially iOS Safari dictation paths and certain Android keyboards—so naive handlers that insert text on every input may double characters or corrupt state.

2 cases

Tags: ime, beforeinput, safari, ios

iOS dictation triggers duplicate input events after completion

On iOS, when using voice dictation to input text into contenteditable elements, the system may fire duplicate beforeinput and input events after the initial dictation completes. The text is split into words and events are re-fired, causing synchronization issues. Composition events do not fire during dictation, making it difficult to distinguish dictation from keyboard input.

1 case

Tags: ime, beforeinput, getTargetRanges

getTargetRanges() returns empty array in beforeinput events

The getTargetRanges() method in beforeinput events may return an empty array or undefined in various scenarios, including text prediction, certain IME compositions, or specific browser/device combinations. When getTargetRanges() is unavailable, developers must rely on window.getSelection() as a fallback, but this may be less accurate.

1 case

Tags: ime, safari, ios

Missing composition events on iOS (IME)

On some iOS Safari versions and keyboards, compositionstart or compositionupdate may not fire reliably for certain languages, while input events still fire—editors that only reconcile on composition boundaries can desync.

1 case

Tags: ime, safari, ios

Pinyin buffer visibility in Safari (Chinese IME)

When typing Chinese Pinyin in Safari, the Latin buffer (underlined or styled) may render differently than in Chrome—overlap with table cells, clipping, or missing underline—so users cannot see what they are composing before picking hanzi.

1 case

Comments & Discussion

Have questions, suggestions, or want to share your experience? Join the discussion below.