adobe / adobe/spectrum-web-components

[Bug]: Arrow keys close IME dropdown in sp-number-field when entries with non-Arabic digits are highlighted

Open
#6,098 4 comments 0 reactions 0 assignees View on GitHub
bug Component:Number field i18n SEV 3 triage
Dominant language
TypeScript
Stars
1.5k
Forks
262
Avg merge
3d 10h
Merged PRs (30d)
68

Description

### Code of conduct

- [x] I agree to follow this project's code of conduct.

### Impacted component(s)

sp-number-field

### Library version

1.10.0

### Expected behavior

When entering input into an `sp-number-field`, an IME user should be able to use the arrow keys to freely move between various options (including conversion between double-byte and single-byte encodings) before committing.

### Actual behavior

Instead of allowing the user to move freely between IME options, the popup immediately closes when an item with non-Arabic digits is highlighted and the old value is restored.

This occurs in Express, Squirrel, and on the Storybook.

### Screenshots

_No response_

### What browsers are you seeing the problem in?

Chrome

### How can we reproduce this issue?

1. Go to the `sp-number-field` [Storybook](https://opensource.adobe.com/spectrum-web-components/storybook/index.html?path=/story/number-field/)
2. Ensure a Japanese keyboard is enabled
3. Click on the number field shown under "Enter a number"
4. Begin typing a number (e.g. 800) - it will initially render using double-byte characters (e.g. 800)
5. Press down arrow to open the IME window; this allows users to choose between different ways of writing the number in Japanese.
6. Using the arrow keys, highlight an item with non-Arabic numerals (e.g. 八〇〇)
7. Note that the IME window immediately closes and the new value is lost

### Sample code or abstract reproduction which illustrates the problem

_No response_

### Severity

SEV 3

### Logs taken while reproducing problem

_No response_

### Would you like to track this issue in Jira?

- [x] Yes, please tell me the ticket number!

Contributor guide

Open the contributing guide

Research direction

Start with the sp-number-field Storybook entry and reproduce the Japanese IME flow described in the issue. Inspect the component's keyboard and input handling; done means arrow keys can highlight non-Arabic numeral options without closing the IME popup, losing the new value, or restoring the old value.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.