adobe / adobe/react-spectrum

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

Open
#5,731 4 comments 0 reactions 0 assignees View on GitHub
bug help wanted NumberField RAC
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

### 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_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.