search

adobe / react-spectrum

A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.
https://react-spectrum.adobe.com
Apache License 2.0
13.05k stars 1.13k forks source link

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

Open oreqizer opened 10 months ago

oreqizer commented 10 months ago

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

react-aria-components@1.0.1

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 commented 10 months ago

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 commented 9 months ago

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 commented 9 months ago

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.

scythewyvern commented 2 months ago

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.

I think this is predictable behavior

Are there any updates on this issue?