Skip to content

Autocomplete: first-item virtual focus not applied for IME composition input (CJK) #10126

@Lucas20000903

Description

@Lucas20000903

Autocomplete: first-item virtual focus not applied for IME composition input (CJK)

Summary

useAutocomplete only calls focusFirstItem() when the input event's inputType === 'insertText'. Korean / Japanese / Chinese IME composition produces 'insertCompositionText' (during composition) and 'insertFromComposition' (on commit). Both fall through to the else if branch and call clearVirtualFocus(true) instead.

Result: in an Autocomplete-wrapped collection (e.g. a Command palette), typing a Latin query auto-focuses the first match so Enter selects it — but typing the same query in Korean/Japanese/Chinese leaves the list with no focused item and Enter does nothing.

Source

packages/@react-aria/autocomplete/src/useAutocomplete.tsonChange:

let onChange = (value) => {
    // Tell wrapped collection to focus the first element in the list when typing forward and to clear focused key when modifying the text via
    // copy paste/backspacing/undo/redo for screen reader announcements
    if (lastInputType.current === 'insertText' && !disableAutoFocusFirst) focusFirstItem();
    else if (lastInputType.current && (lastInputType.current.includes('insert') || lastInputType.current.includes('delete') || lastInputType.current.includes('history'))) {
        clearVirtualFocus(true);
        ...
    }
    state.setInputValue(value);
};

The gate was introduced in #8438. CJK input types were not considered.

Reproduction

  1. Render an Autocomplete wrapping a Menu with items whose textValue includes CJK strings (e.g. "경영관리", "오더관리").
  2. With the macOS Korean IME active, type 경영.
  3. Observe: the list filters correctly, but no item receives data-focused="true" / aria-activedescendant. Pressing Enter selects nothing.
  4. Switch to Latin input on a matching item — first item is focused, Enter selects.

I have only reproduced this with the Korean IME, but Japanese and Chinese IMEs also emit insertCompositionText / insertFromComposition per the Input Events spec, so the same issue is expected for any CJK or other composition-based input method.

Expected

Typing forward via an IME should be semantically equivalent to typing forward via direct keystrokes — the first matching item should receive virtual focus.

Environment

  • react-aria 3.48.0
  • react-aria-components 1.17.0
  • React 19.2.6
  • macOS 25, Chrome (Korean 2-set IME)

Suggested fix

Extend the condition to cover IME-driven inserts (these are still "typing forward"):

- if (lastInputType.current === 'insertText' && !disableAutoFocusFirst) focusFirstItem();
+ if ((lastInputType.current === 'insertText'
+     || lastInputType.current === 'insertCompositionText'
+     || lastInputType.current === 'insertFromComposition')
+     && !disableAutoFocusFirst) focusFirstItem();

insertCompositionText and insertFromComposition are emitted by browsers for IME input across Chrome, Safari, and Firefox per the Input Events Level 2 spec. Treating them as forward typing matches user intent and removes the CJK regression without affecting paste / undo / history flows (which use distinct inputType values like insertFromPaste, historyUndo, etc.).

Happy to follow up with a PR (+ test + changeset) if maintainers confirm the approach.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions