`NumberField` breaks when value is less than 3 for `locale="ar"`

[zernonia]

Provide a general summary of the issue here

When we set locale to ar, the NumberField breaks when the value is less than 3. Try clicking on decrement in the stackblitz attached.

🤔 Expected Behavior?

The component should render value 0 to 2 correctly.

😯 Current Behavior

Breaks when value is less than 3

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

https://stackblitz.com/edit/stackblitz-starters-bwt79x?file=src%2Findex.tsx

1. Click decrement
2. Observe the input value not showing 2 أيام

Version

1.3.1

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Mac

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

Thanks for reporting this. It looks like this is going to be problematic, it doesn't actually include a numeral at all in the response (if I'm understanding this correctly, I do not read or write arabic)

let formatter = new Intl.NumberFormat('ar-AE', {style: 'unit', unit: 'day', unitDisplay: 'long'});
formatter.format(2);

Google translate of the returned string says 2 days, so I feel like adding the numeral in would just make it confusing/repetitive.

I do not know if this constitutes a bug or not in the Intl formatter... or if this is something we need to look into handling on our end. I'll need to bring this up with our Internationalization team.

[peter-emad99]

Thanks for reporting this. It looks like this is going to be problematic, it doesn't actually include a numeral at all in the response (if I'm understanding this correctly, I do not read or write arabic)

let formatter = new Intl.NumberFormat('ar-AE', {style: 'unit', unit: 'day', unitDisplay: 'long'});
formatter.format(2);

Google translate of the returned string says 2 days, so I feel like adding the numeral in would just make it confusing/repetitive.

I do not know if this constitutes a bug or not in the Intl formatter... or if this is something we need to look into handling on our end. I'll need to bring this up with our Internationalization team.

Arabic is my first language , and i use this package in my app , happy to help or provide any information needed ,Thanks in advance

[peter-emad99]

i think the issue related to how the arabic language represent the singular and dual counts we don't say 2 days (2 أيام) or 1 day (1يوم) then number is included inside the word itself ( يومان ) (يوم) so the problem is in parsing , i don't know what will be the possible solution because the parsing should depend on the unit as the word it self change when unit chage ex: unit="hour" 1 ( ساعة ) 2 (ساعتان)

[snowystinger]

Theoretically we should have all the available forms of the unit based on https://github.com/adobe/react-spectrum/blob/22e803a2bb79306336190e7447469dbef2dff48b/packages/%40internationalized/number/src/NumberParser.ts#L252C7-L252C20

if we passed the plural parts out of our getSymbols function, we could possibly use it in our parsing attempts https://github.com/adobe/react-spectrum/blob/22e803a2bb79306336190e7447469dbef2dff48b/packages/%40internationalized/number/src/NumberParser.ts#L262

Right now the literals such as the units/plurals are removed during sanitize https://github.com/adobe/react-spectrum/blob/22e803a2bb79306336190e7447469dbef2dff48b/packages/%40internationalized/number/src/NumberParser.ts#L121 but if fullySanitized comes back as an empty string, we could try matching it to the plural forms?