NumberField switches to Arabic numbering after entering only a period in percentage fields

已关闭
  • 哪里不对？
#10,875 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

维护者通常 1 天内回复

@adobe-ddavidso 已经在做这个了。

开始于 2026年10月27日。

  • #10876 来自 @adobe-ddavidso —— 未关闭

评估

难度
3/5
预计耗时
1-2 天
新手友好度
65/100
Issue 类型
缺陷
描述清晰度
描述清楚
活跃度
活跃
技术栈
react, typescript
领域
frontend, internationalization

调研方向

Start with the NumberParser implementation in @internationalized/number and trace how getNumberingSystem('.') selects a system; the report says partial-input validation should remain permissive. Read the React Aria Components regression test described in the issue and add coverage for the unit-percent display after blur. Done means period-only input retains the configured locale’s numbering system while non-Latin numeral detection and decimal-separator detection still work.

由索引模型根据 Issue 内容生成。

描述

General summary

Entering only . in a percentage NumberField and then blurring can switch the displayed digits and percent sign to Arabic, even though the locale has not changed. This reproduces in the public React Spectrum v3 documentation as well as an integer percentage field using Spectrum 2.

Related: #3862 (closed), which describes a similar comma-only numbering-system switch. No open duplicate was found for this remaining period-only case.

Expected Behavior

The formatted result should retain the numbering system configured by the locale/options. A grouping separator alone should not cause an English-locale field to switch to Arabic numbering.

Current Behavior

The field displays Arabic digits and an Arabic percent sign after blur.

In the unit-percent reproduction below, 1% becomes ١٪؜ (\u0661\u066a\u061c), while the numeric value remains 1 and no numeric onChange event fires. Repeating with , restores 1% normally.

The documentation example uses style: 'percent' rather than style: 'unit'. Its numeric parsing behavior is separate from the unexpected numbering-system switch; this report focuses on the display changing to Arabic.

Steps to Reproduce

Public documentation example - no local setup required
  1. Open https://react-spectrum.adobe.com/v3/NumberField.html#percentages with an English/Latin-numbering locale.
  2. In the Sales tax example, select the entire displayed value and replace it with a single ..
  3. Click outside the field.
  4. Observe that the resulting percentage is displayed using Arabic numbering rather than the original Latin numbering.

The example is:

<NumberField
  label="Sales tax"
  formatOptions={{style: 'percent'}}
  minValue={0}
  defaultValue={0.05}
/>
Integer percentage reproduction

With an en-US Spectrum 2 NumberField:

<NumberField
  label="Percentage"
  defaultValue={1}
  minValue={1}
  maxValue={99}
  step={1}
  formatOptions={{
    style: 'unit',
    unit: 'percent',
    maximumFractionDigits: 0
  }}
/>

Replace the value with . and blur: 1% becomes ١٪؜ instead of restoring 1%.

Underlying parser reproduction
import {NumberParser} from '@internationalized/number';

let parser = new NumberParser('en-US', {
  style: 'unit',
  unit: 'percent',
  maximumFractionDigits: 0
});

parser.isValidPartialNumber('.'); // true
parser.parse('.'); // NaN
parser.getNumberingSystem('.'); // 'arab'; expected 'latn'
parser.getNumberingSystem(','); // 'latn'

Possible Solution

NumberParser accepts . as partial Arabic input because it normalizes to an Arabic grouping separator. getNumberingSystem reports that candidate system even when the input contains no numerals or decimal separator, and NumberField uses it when formatting on blur.

Keep partial-input validation permissive, but require numeral or meaningful decimal-separator evidence before choosing an alternative numbering system. Otherwise return the default system for the configured locale/options. Preserve actual non-Latin numeral detection and existing decimal-separator detection when decimals are allowed.

A React Aria Components regression test reproduces the unit-percent display issue on unmodified main; a fix and regression tests are being prepared.

Context

Percentage inputs unexpectedly switch writing systems after an incomplete edit. The public documentation reproduction shows this is not specific to application code or custom change handlers.

Version

Observed with @react-spectrum/s2 1.8.2 and @internationalized/number 3.6.9. The unit-percent case also reproduces in repository tests on main at 3280ed4b0e65cfce16ae2767aba52a5f9a8ad4d6.

The public v3 documentation example was reproduced on October 27, 2026; its deployed package version was not determined.

Browsers

Google Chrome 156.0.8078.48. The unit-percent case was independently reproduced in the repository Jest/JSDOM environment.

Operating System

macOS. Automated reproduction uses Node.js 24.21.0.

Company/Team

Adobe Marketo CET.

Tracking Issue

Related closed report: #3862.

Prepared with GitHub Copilot assistance.

主要语言
TypeScript
星标
16k
派生
1.6k
平均合并
4 天 3 小时
30 天内合并 PR
39

环境准备

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

adobe/react-spectrum 的其他 Issue

查看 adobe/react-spectrum 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。