Provide a general summary of the issue here

Assume that on one page a user is allowed to type 3.000.000,25 for a German formatted number and then on another one they are only allowed to provide a US number (3,000,000.25).

The “steps to reproduce” below shows that, due to useNumberField mutating/formatting the result, the final value is nowhere near what the user tried to type. And while a visual user can see that what they typed is not what came up, a screenreader user will have no idea that their desired number (three million and one quarter) became something very far off (three).

🤔 Expected Behavior?

The widget would inform the user that an error has occurred due to the user assuming a locale that was not what is set.

😯 Current Behavior

The widget mutates the value

💁 Possible Solution

I’m honestly not sure. For me, it’s reason enough to not use a masking solution and to utilize error validation only as I share in https://dev.to/dgreene1/why-masking-is-not-accessible-i3c

But if we were to fix it in react-aria, we’d somehow have to be able to identify that the user has attempted to type a number that would be accurate in a locale that is not the one currently set in useLocale. I honestly don’t know if this would be even possible. But if someone can think of how we can catch the full input and operate off of that assumption, that would allow us to be predictive.

🔦 Context

The scenario where this is most relevant is where a German user copies a value out of an Excel file or a PDF that has USA format.

For my particular usage context, we had considered iteratively migrating to useNumberField. That means that until we had completely migrated every page over to useNumberField, our standard inputs would have differing behavior.

Some pages are internationalized and some are not yet supporting internationalization.

A requirement for us is that we are very clear to users when a page is or is not supporting various formats.

🖥️ Steps to Reproduce

1. Navigate to https://react-spectrum.adobe.com/react-aria/useNumberField.html#decimals
2. type 3.000.000,25 (which is three million and one quarter in german formatting)
3. the widget will convert the value to 3

Alternatively, set your locale to de-DE and do the following:

1. Navigate to https://react-spectrum.adobe.com/react-aria/useNumberField.html#decimals
2. type 3,000,000.25 (which is three million and one quarter in USA formatting)
3. the widget will convert the value to 3

Version

latest

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Windows 10

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response