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

Abierto
  • ¿Algo no está bien?
#10,875 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

@adobe-ddavidso ya está trabajando en esto.

Desde el 27/10/2026.

  • #10876 de @adobe-ddavidso — abierto

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
65/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
react, typescript
Área
frontend, internationalization

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.

Lenguaje dominante
TypeScript
Estrellas
16k
Forks
1.6k
Merge medio
2 d 17 h
PR fusionados (30 d)
41

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de adobe/react-spectrum

Todos los issues de adobe/react-spectrum

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.