IME Composition Events: Input Method Editors, beforeinput and Unicode-Safe State

Input Method Editors (IMEs) let people enter characters or phrases through intermediate phonetic, syllabic or multi-keystroke states. While composing, text may be provisional and candidates may change. A reactive interface that validates, reformats or replaces the entire input on every keystroke can corrupt the user's composition even when its Unicode string operations are otherwise correct.

Distinguish preedit text from committed text

During Japanese kana-to-kanji input, for example, the composition may evolve through provisional phonetic content, candidate selections and a final committed string. Composition events communicate this lifecycle at the DOM level; what appears in the edit control may not yet be committed input.

Application models should not assume that each keyboard event corresponds to one Unicode scalar or that a composed character is built by simply concatenating key labels. IMEs may deliver full phrases, replacement ranges and platform-specific behavior.

Use compositionstart, update and end as lifecycle signals

The compositionstart, compositionupdate and compositionend events mark key points in a composition session. Event data can report evolving or final composition text, subject to browser and platform semantics.

The application should observe the real input field's value and selection state rather than assuming event data alone reconstructs its final state. Event ordering relative to beforeinput and input can vary, so design idempotent state updates.

beforeinput describes editing intent

The beforeinput event can expose inputType values associated with composition, such as insertCompositionText or insertFromComposition where supported. isComposing helps detect participation in an active composition transaction.

Not all such events are cancelable. A handler that always calls preventDefault() to enforce a mask may fail to stop the browser's operation or interfere with native IME behavior. Separate blocking policies from the state synchronization that must happen after the actual change.

Reactive rendering can reset the candidate window

A component that completely recreates its input or contenteditable subtree after each provisional update may detach the native selection, move the caret or force an early composition commit. The symptom can look like characters disappearing or duplicated syllables.

Keep the editing host mounted, update only the minimal state necessary during composition, and defer formatting or transformations that are not essential until the commit boundary. For complex editors, map the post-composition DOM selection back into the application's document model.

Validation should preserve user agency

Immediate validation designed for ASCII passwords or part numbers can reject the transient composition text of a legitimate name or phrase. Treat provisional content differently from a final committed value when the field's semantics allow it.

For a code or identifier field with strict rules, document the accepted character profile and apply final validation at an appropriate boundary. Do not use blanket non-ASCII rejection for human names or multilingual prose.

Keyboard events are not reliable Unicode text transport

Keyboard keydown and keyup indicate key activity, not necessarily text insertion. Autocorrect, speech input, handwriting recognition and IMEs can produce text without a one-key-one-character sequence.

For text input tracking, prefer input and composition-aware logic. Synthetic keyboard events often do not trigger the native IME pipeline, so unit tests built only from dispatchEvent(new KeyboardEvent(...)) are insufficient.

Surrogate pairs and combining marks still matter on commit

The final committed string may contain characters outside the BMP, combining marks, or ZWJ sequences. Application code that trims a value to a maximum number of UTF-16 units may split a surrogate pair; a code-point-based trim may still split a grapheme cluster.

Specify whether limits are measured in bytes, code units, code points or grapheme clusters. Use the correct method for the contract and revalidate after composition; visible character length is not directly a JavaScript string length.

Contenteditable creates additional selection complexity

The browser may insert or replace a region spanning text nodes during IME composition. The event's target ranges, when supported, can help describe affected content, but DOM mutations and dynamic formatting complicate reliable reconciliation.

Avoid replacing the whole editor root while composition is active. After commitment, reconcile the DOM and application model using actual text and ranges, not the assumption that the change happened at the previous caret offset.

Test with actual CJK and multilingual input methods

Test Japanese candidate conversion, Chinese Pinyin candidates, Korean syllable assembly and at least one combining-mark or complex-script keyboard. Vary acceptance and cancellation of candidates, caret movement during preedit, paste during composition and undo/redo after commit.

A cross-platform IME regression report should include OS, browser, input method, event sequence, value snapshots, selection offsets and expected committed Unicode scalars. A passing ASCII text-entry test is not evidence that composition support is correct.

Reproducible example and limits of the measurement

The following specimen demonstrates the specific concept in a controlled source or browser context. It is not a substitute for fully exercising the target application with the appropriate language, platform input method and real user data. Distinguish textual transformations from display-only differences.

const input = document.querySelector('input');
let composing = false;
input.addEventListener('compositionstart', () => composing = true);
input.addEventListener('compositionend', () => {
  composing = false;
  validateCommittedValue(input.value);
});
input.addEventListener('input', event => {
  if (composing || event.isComposing) return; // defer destructive formatting
  validateCommittedValue(input.value);
});
function validateCommittedValue(value){ console.log(value); }
// Browser event ordering varies; keep the field mounted.

Write down what is supposed to remain stable: the encoded byte stream, the Unicode scalar sequence, the selected locale, the logical reading order or just the user-facing meaning. These are different test assertions and should never be replaced by a single screenshot comparison.

Interoperability evidence matrix

Environment-specific output should be classified separately from violations of a normative Unicode algorithm or protocol. When locale or font support differs, explain the fallback explicitly rather than claiming the source text became invalid.

Validation approach and common false positives

1. compositionstart: Prepare the controlled fixture preedit begins. Record its Unicode scalar sequence and the environment, including browser or application version, selected locale and data format. The expected interpretation is: value may be provisional. Compare observed output with this contract rather than only its visual appearance.
2. compositionupdate: Prepare the controlled fixture candidate evolves. Record its Unicode scalar sequence and the environment, including browser or application version, selected locale and data format. The expected interpretation is: do not force premature normalization. Compare observed output with this contract rather than only its visual appearance.
3. beforeinput: Prepare the controlled fixture inputType/isComposing. Record its Unicode scalar sequence and the environment, including browser or application version, selected locale and data format. The expected interpretation is: intent may be non-cancelable. Compare observed output with this contract rather than only its visual appearance.
4. compositionend: Prepare the controlled fixture composition finishes. Record its Unicode scalar sequence and the environment, including browser or application version, selected locale and data format. The expected interpretation is: read actual committed field value. Compare observed output with this contract rather than only its visual appearance.
5. input: Prepare the controlled fixture post-mutation notification. Record its Unicode scalar sequence and the environment, including browser or application version, selected locale and data format. The expected interpretation is: not equivalent to individual keyboard strokes. Compare observed output with this contract rather than only its visual appearance.

Build regression fixtures from actual user workflows as well as simple scalar vectors. Include logical text order, non-BMP symbols, mixed direction, combining sequences, and clipboard transitions as appropriate. Test both a positive path and an edge case that could falsify a simplified implementation.

Common misinterpretations

• Distinguish preedit text from committed text: If the output differs, isolate whether the source data, parsing rules, locale metadata, selection behavior or rendering layer caused it. Avoid changing input text until the defect has been reproduced at a specific boundary.
• Use compositionstart, update and end as lifecycle signals: If the output differs, isolate whether the source data, parsing rules, locale metadata, selection behavior or rendering layer caused it. Avoid changing input text until the defect has been reproduced at a specific boundary.
• beforeinput describes editing intent: If the output differs, isolate whether the source data, parsing rules, locale metadata, selection behavior or rendering layer caused it. Avoid changing input text until the defect has been reproduced at a specific boundary.
• Reactive rendering can reset the candidate window: If the output differs, isolate whether the source data, parsing rules, locale metadata, selection behavior or rendering layer caused it. Avoid changing input text until the defect has been reproduced at a specific boundary.
• Validation should preserve user agency: If the output differs, isolate whether the source data, parsing rules, locale metadata, selection behavior or rendering layer caused it. Avoid changing input text until the defect has been reproduced at a specific boundary.

A consistent technical diagnosis names the responsible layer and preserves the original specimen for an independent rerun. Content identity, typography, locale formatting and application input policy are not interchangeable.

Primary standards and API documentation

Use the normative sources below to resolve terminology and algorithmic requirements. APIs and Unicode standards may evolve: record relevant versions and be careful not to generalize a single browser's optional behavior as a universal requirement.

• W3C UI Events: Composition Events. Consult this standard or primary API reference for the relevant definitions, error cases, conformance details and implementation boundaries.
• W3C Input Events Level 2. Consult this standard or primary API reference for the relevant definitions, error cases, conformance details and implementation boundaries.
• MDN CompositionEvent. Consult this standard or primary API reference for the relevant definitions, error cases, conformance details and implementation boundaries.
• WHATWG HTML Editing. Consult this standard or primary API reference for the relevant definitions, error cases, conformance details and implementation boundaries.
• Unicode Text Segmentation UAX #29. Consult this standard or primary API reference for the relevant definitions, error cases, conformance details and implementation boundaries.

Related published research

Part of the Multilingual Text & Input Systems virtual silo. These published references explain adjacent concepts without creating duplicate category URLs:

• contenteditable unicode text
• text selection grapheme clusters
• string length bytes units codepoints graphemes