NumberField opens numeric keyboard with , instead of . on some iPhone regions

[oreqizer]

Provide a general summary of the issue here

Regardless of what is set in I18nProvider, NumberField always opens iPhone numeric keyboard with , instead of . if the iPhone region is set to such that they use that decimal separator.

This makes it impossible to input in decimals.

🤔 Expected Behavior?

Honestly, don't know. I've read about iPhone numeric keyboards and apparently there's no way to change which numeric keyboard is going to be displayed.

Ideally, the keyboard would open with locale identical to the provided to I18nProvider, or it would be possible to change NumberField locale so that it corresponds to iPhone's regional settings.

😯 Current Behavior

Currently, for sk-SK regional settings in iPhone and en-GB in I18nProvider, the iPhone numeric keyboard opens with , instead of . as the decimal separator.

💁 Possible Solution

1. give an option to open up the full keyboard, as for input[type='number']. slightly worse UX, but much better than being unable to input in decimals
2. find a way to sync I18nProvider locale with iPhone regional settings

🔦 Context

I am trying to open up numeric keyboard on iPhone with the correct, functioning decimal separator.

🖥️ Steps to Reproduce

1. Set iPhone to e.g. Slovak region
2. Visit https://codesandbox.io/p/sandbox/gracious-shadow-r445mc
3. Open up the number field
4. Try typing 13,37. it will erase the ,, because it expects .

Version

[email protected]

What browsers are you seeing the problem on?

Safari

If other, please specify.

No response

What operating system are you using?

iOS 17

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[LFDanLu]

The team discussed this today and we think that perhaps we could change our number parsing so that we try using the user's locale and the locale specified by I18nProvider. We figured that a user would be used to typing the number separator they are used to and that they may not even know what separator would be correct for other locales any ways. That way your repro steps would work by converting the , to a . as the user types.

[snowystinger]

Updating with some links and extra info about an implementation. We already do a check/test for the numbering system being used, we could do something similar for the group/decimal separator and perform two attempts at parsing to figure out what the number is. See https://github.com/adobe/react-spectrum/blob/main/packages/%40internationalized/number/src/NumberParser.ts#L71 for guesses at the numbering system.

[devongovett]

I just realized we might need to make this conditional to only mobile keyboards though? If the keyboard has both , and . it could be ambiguous.