adobe / adobe/spectrum-web-components

[Bug]: Number fields separator not locale aware

Open
#6,013 6 comments 0 reactions 0 assignees View on GitHub
bug Component:Number field i18n 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)

NumberField

### Library version

spectrum-web-components 1.9.0

### Expected behavior

Users from different regions of the globe should be able to separate the values in the number fields with the appropriate separator for their language.
Example: In English the formatting would be "123,456.789", while for other locales the formatting would be "123.456,789".

This is a problem because, for example, in Adobe Express, we display numeric keyboards and the separator will be chosen by the OS according to the user's localization settings.
But if the user has a region like Romania, the separator shown will be "," , which will not be accepted by the NumberField. Therefore, the user will not be able to enter decimal values.

### Actual behavior

The "," always separates thousands and "." is the separator for decimals, regardless of user language.
How can we reproduce:

https://opensource.adobe.com/spectrum-web-components/storybook/?path=/story/number-field--default

In this storybook, use different locale settings and observe that adding a comma will always separate thousands, not the fractional part.

### Screenshots

_No response_

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

_No response_

### How can we reproduce this issue?

1. Go to '...'
2. Click on '....'
3. Scroll to '....'
4. Check console
5. See error

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

_No response_

### Severity

None

### 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 NumberField component and reproduce the issue in the linked Storybook example using different locale settings. Compare the accepted and displayed separators for English and other locales. Done means locale-appropriate decimal input, such as a comma in Romanian, is accepted while grouping separators continue to work.

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
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.