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
12.48k stars 1.08k forks source link

number field does not allow input from MacOS Japanese IME keyboard #6678

Open tuananhlai opened 1 month ago

tuananhlai commented 1 month ago

Provide a general summary of the issue here

React Aria's NumberField does not allow input from Japanese keyboard on MacOS.

https://github.com/adobe/react-spectrum/assets/42168740/4f3782ff-298e-4ed0-97b9-39eae176768c

<input type='number' />

https://github.com/adobe/react-spectrum/assets/42168740/cebaf076-ce45-4e0b-9375-8ba51fea361a

πŸ€” Expected Behavior?

The number field receives value from the keyboard.

😯 Current Behavior

The number field does not receive value from the keyboard.

πŸ’ Possible Solution

No response

πŸ”¦ Context

No response

πŸ–₯️ Steps to Reproduce

  1. Add Japanese - Romaji input and switch to it. (guide)
  2. Visit https://react-spectrum.adobe.com/react-aria/useNumberField.html#example
  3. Press a number on the keyboard.

Version

latest

What browsers are you seeing the problem on?

Firefox

If other, please specify.

No response

What operating system are you using?

MacOS Sonoma 14.5

🧒 Your Company/Team

No response

πŸ•· Tracking Issue

No response

snowystinger commented 1 month ago

This may be due to me not knowing Japanese or maybe not knowing enough about the keyboard and IME input, however, if I change to a Japenese keyboard on my mac and type the 1 key, this is what I get ぬ which I don't think is a number as I think that is δΈ€. I can't get the IME to show up on a native input type=number outside our docs. Could you include some more instructions for bringing it up?

That said, I have some guesses. I think we're preventing the IME from appearing possibly by not accepting any characters other than the supported numbering system symbols. Maybe we can lift that restriction during composition.

tuananhlai commented 1 month ago

Gladly. The keyboard I'm using is Japanese - Romaji. I've included a screen capture for adding it below.

https://github.com/adobe/react-spectrum/assets/42168740/0a3b4ab3-aadf-432f-899b-fe00839cacf8

For switching the keyboard input, you can use the top bar like so.

https://github.com/adobe/react-spectrum/assets/42168740/762f6b74-997e-46a9-ae8c-88744e745e86

yihuiliao commented 1 month ago

Yeah, I was able to reproduce. It seems like it kinda works in Safari though (at least for me), and I noticed that it doesn't work in RSP NumberField either.

tuananhlai commented 1 month ago

The input kinda works for Safari but there's a weird bug when you are cycling between the options.

https://github.com/adobe/react-spectrum/assets/42168740/57493596-cf1d-4e5c-b638-2798a17c3c67