adobe / adobe/spectrum-web-components
[Bug]: NumberField inconsistency when using "unit:second" with "unitDisplay: narrow" in ja-JP locale
- 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
### Expected behavior
All browsers should display the same unit, according to the locale. In this case all browsers should display `{value}秒`.
This is a consequence of the way different browser engines implement the ECMAScript standard - it looks like Safari patched the [CLDR info](https://st.unicode.org/cldr-apps/v#/ja/Duration/header_second) in order to show the jp char.
### Actual behavior
Chrome and Firefox display `{value}s` instead of `{value}秒` - the way Safari does.
### Screenshots
Safari:
Chrome:
### What browsers are you seeing the problem in?
_No response_
### How can we reproduce this issue?
1. Go to https://studio.webcomponents.dev/edit/B30kQQReJuxsP7HGiDUA/src/index.ts?p=stories
2. Change the value
3. Observe that on Safari it shows `{value}秒` while on Chrome it shows `{value}s`
### Sample code or abstract reproduction which illustrates the problem
```ts
import {
LitElement,
html,
customElement,
TemplateResult,
} from "lit-element";
import "@spectrum-web-components/number-field/sp-number-field.js";
import "@spectrum-web-components/field-label/sp-field-label.js";
import '@spectrum-web-components/theme/sp-theme.js';
import '@spectrum-web-components/theme/src/themes.js';
@customElement("my-number-field")
export default class MyNumberField extends LitElement {
private formatOptions: Intl.NumberFormatOptions = {
style: "unit", unit: "second", unitDisplay: "narrow"
}
protected render(): TemplateResult {
return html`
Adjust exposure
`;
}
}
```
### Severity
None
### Logs taken while reproducing problem
_No response_
Contributor guide
Research direction
Start with the NumberField entry point imported as @spectrum-web-components/number-field/sp-number-field.js and reproduce the linked Studio example using the provided Intl.NumberFormat options. Compare ja-JP output for Safari, Chrome, and Firefox, then verify that the component meets the issue's expected {value}秒 display consistently across browsers.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend, internationalization
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100