adobe / adobe/spectrum-web-components
[Bug]: Number fields separator not locale aware
- 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
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