Skip to content

fix: Ignore IME composition enter in select and multiselect filtering#4676

Open
greymoth-jp wants to merge 1 commit into
cloudscape-design:mainfrom
greymoth-jp:fix-select-ime-composition-enter
Open

fix: Ignore IME composition enter in select and multiselect filtering#4676
greymoth-jp wants to merge 1 commit into
cloudscape-design:mainfrom
greymoth-jp:fix-select-ime-composition-enter

Conversation

@greymoth-jp

Copy link
Copy Markdown

Description

The filtering input of Select and Multiselect selects the highlighted option when Enter is pressed, but it does not account for IME composition. When a user composes text with an IME (for example Japanese, Chinese or Korean) and presses Enter to confirm a candidate, that Enter is also treated as an option selection: the highlighted option is selected and the dropdown closes, instead of the keypress just committing the composed text into the filter.

The other text inputs in this repository already guard against this. autosuggest-input reads useIMEComposition and ignores Enter while isComposing() is true, and prompt-input checks event.nativeEvent.isComposing || props.isComposing?.(). The select filter input was passing its keydown straight to useMenuKeyboard without any such guard.

This applies the same guard to the filter handler in useSelect (shared by Select and Multiselect). event.detail.isComposing covers the keydown fired during composition, and useIMEComposition(filterRef) covers the brief window after compositionend where some browsers fire a spurious Enter, matching autosuggest-input and prompt-input. Other key handling is unchanged.

Related links, issue #, if available: n/a

How has this been tested?

Added a unit test in src/select/__tests__/use-select.test.ts: with an option highlighted, an Enter whose isComposing detail is true no longer calls updateSelectedOption and keeps the dropdown open, while a regular Enter still selects the option. The existing use-select unit tests continue to pass.

When composing text with an IME and pressing Enter to confirm a candidate, the
filter input of Select and Multiselect selected the highlighted option and closed
the dropdown instead of committing the composed text.

The sibling inputs already guard this: autosuggest-input uses useIMEComposition and
prompt-input checks nativeEvent.isComposing. Apply the same guard to the shared
useSelect filter handler so composition keystrokes, and the spurious Enter some
browsers fire right after compositionend, are ignored.
@greymoth-jp greymoth-jp requested a review from a team as a code owner June 30, 2026 04:48
@greymoth-jp greymoth-jp requested review from SpyZzey and removed request for a team June 30, 2026 04:48
@codecov

codecov Bot commented Jul 1, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.57%. Comparing base (ab8ebd0) to head (8a8b068).
⚠️ Report is 6 commits behind head on main.

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #4676   +/-   ##
=======================================
  Coverage   97.57%   97.57%           
=======================================
  Files         948      948           
  Lines       30489    30495    +6     
  Branches    11148    11150    +2     
=======================================
+ Hits        29749    29755    +6     
+ Misses        733      693   -40     
- Partials        7       47   +40     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant