Ralfarios / antd-input-otp

An OTP Input Component based on Ant Design Component Library for React.
https://www.npmjs.com/package/antd-input-otp
19 stars 4 forks source link

[BUG] - inputType="numeric" doesn't show number pad in mobile #31

Closed djolf closed 10 months ago

djolf commented 10 months ago

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 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.

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

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

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

djolf commented 10 months ago

Actually, it can be fixed using the inputMode prop.

<InputOTP inputType="numeric" inputMode="numeric" />