Number and Pin Input Fields doesn't Restrict Full-Width Characters in using Japanese Input Method

[tobigumo]

🐛 Bug report

The Number Input and Pin Input fields are intended to only accept numeric or alphabetic input.
However, when using input methods for languages like Japanese, multi-byte character input is not restricted and is accepted.

💥 Steps to reproduce

Test on the Zag.js Documentation Website:
https://zagjs.com/components/react/pin-input

1. Switch to "Japanese input mode."
2. Press the "a" key, which inputs “あ” and moves to the next input field.
3. Press the "1" key, which inputs “１” (FULLWIDTH DIGIT ONE) and moves to the next input field.
4. Press the "p" key, which inputs “ｐ” (FULLWIDTH P) and moves to the next input field.

💻 Link to reproduction

Test on the Zag.js Documentation Website:
https://zagjs.com/components/react/pin-input

🧐 Expected behavior

I expect the input fields to reject characters in the same way they do when entering alphabetic characters in a numeric field or numeric characters in an alphabetic field.

🧭 Possible Solution

🌍 System information

Software	Version(s)
Zag Version	0.5.0
Browser	Chrome 124.0.6367.208, Safari 17.4.1 (arm64)
Operating System	macOS Sonoma 14.4.1

📝 Additional information

I am not familiar with Zag.js, so I'm not sure if this information is useful.

Typically, when using Japanese input mode with an Input Method in three steps:

• Type in the Latin alphabet to input Hiragana.
• Select conversion candidates.
• Confirm the conversion.

However, in Zag.js, the character is immediately confirmed upon key press, skipping the conversion step, and the input moves to the next field.
At the same time, pressing an alphabetic key in a numeric field or a numeric key in an alphabetic field results in accepting full-width characters.

It would be preferable to check the input character once the conversion candidates are finalized and then decide whether to accept the input.

You can determine if a conversion is in progress using the KeyboardEvent.isComposing property.
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/isComposing

[tobigumo]

I take it back because I was mistaken.