I'm using your InputOTP in a webapp which will be accessed by users from mobile most of the time, using numerics only.
However, inputType="numeric" doesn't get passed down to the actual input component, so on iOS it shows the usual qwerty keyboard (which doesn't have numbers) instead of the T9 keypad. The user has to switch to number, and after keying 1 number, focus jumps to the next SingleInputOTP where the qwerty keyboard appears again. This is a BIG hindrance.
I believe this problem can be solved easily, by passing the inputType to the actual input component, <input type="text" inputMode="numeric" />, which will trigger the correct keyboard on mobile. I combed through the code, I found that the way the inputType works is by regex to prevent the user from keying in disallowed characters, but this way, mobile keyboard is missed out.
to reproduce:
1. go to https://codesandbox.io/s/antd-input-otp-demo-1jmypp using iOS phone (with default keyboard)
2. key in a number, you will see your keyboard jump back to qwerty
Description
Hi,
I'm using your InputOTP in a webapp which will be accessed by users from mobile most of the time, using numerics only.
However,
inputType="numeric"
doesn't get passed down to the actual input component, so on iOS it shows the usual qwerty keyboard (which doesn't have numbers) instead of the T9 keypad. The user has to switch to number, and after keying 1 number, focus jumps to the nextSingleInputOTP
where the qwerty keyboard appears again. This is a BIG hindrance.I believe this problem can be solved easily, by passing the
inputType
to the actual input component,<input type="text" inputMode="numeric" />
, which will trigger the correct keyboard on mobile. I combed through the code, I found that the way the inputType works is by regex to prevent the user from keying in disallowed characters, but this way, mobile keyboard is missed out.check this page out for more information of implementing an input OTP for mobile https://web.dev/sms-otp-form/
Reproduction URL
https://codesandbox.io/s/antd-input-otp-demo-1jmypp
Reproduction steps
Screenshots
No response
Logs
No response
Browsers
Safari
OS
No response
Build Tool
Vite
Are you using a TypeScript?
Yes
Ant Design Version
5.9.2
React Version
18.2.0