Closed deadcoder0904 closed 8 months ago
hi @deadcoder0904 I believe using TypeScript to narrow down inputMode to be either text
or numeric
wasn't a nice choice.
https://github.com/guilhermerodz/input-otp/blob/master/packages/input-otp/src/types.ts#L21
In fact, the feature you want already works out-of-the-box, it's just TypeScript complaining. You might be able to go with @ts-ignore
for the next line no problem.
I'll remove inputMode type restriction and push into the newest 1.2.0 which will be released today.
thanks for sharing.
how do i make it work?
i tried ||
and &&
both but can't type alphabet & numbers both.
<OTPInput
value={value}
onChange={setValue}
maxLength={6}
// @ts-ignore
inputMode={"text" && "numeric"}
/>
Since input-otp works with native inputs, you can provide a prop
<OTPInput
+ // overrides the default numeric pattern
+ // you can use any pattern you want
+ pattern='^[a-zA-Z0-9]+$'
/>
Alternatively, the library offers regexps so you don't have to remember them:
import {
OTPInput,
+ REGEXP_ONLY_DIGITS_AND_CHARS
} from 'input-otp'
<OTPInput
+ pattern={REGEXP_ONLY_DIGITS_AND_CHARS}
/>
There's no official HTML inputmode value such as alphanumeric
. Check MDN.
The only possible values are none
text
decimal
numeric
tel
search
email
url
.
From my side, I'll
closing this for now, let me know if you run into any issues forward
does REGEXP_ONLY_DIGITS_AND_CHARS
include lowercase alphabets a-z
as well?
i mean is it the same as the pattern '^[a-zA-Z0-9]+$'
written above?
looks like typescript says it is the same.
thanks for the solution :)
i'm curious do i need inputMode
as well or can i drop it?
it works without it but i'm not sure if it's the best way?
Just a newbie Typescript developer here.
A quick glance at the docs, and I thought that this would work to support text, but it did not:
<InputOTP
inputMode="text"
maxLength={6}
value={otpValue}
onChange={handleOTPChange}
>
This is what got it working for me:
<InputOTP
pattern="^[a-zA-Z0-9]+$"
maxLength={6}
value={otpValue}
onChange={handleOTPChange}
>
Is your feature request related to a problem? Please describe. I want both letters & numbers. Its pretty common in various services that I use for OTP.
Heck, most authenticator apps like Twitter use alphanumeric. Ik this bcz its logging me out for the last 30 days everyday so I have to type it out lol.
Describe the solution you'd like
Implementation: https://github.com/pilcrowOnPaper/oslo/blob/c1f60eca2137cda93bb7aefed35781d85d12c7b6/src/crypto/random.ts#L52-L67