guilhermerodz / input-otp

One time passcode Input. Accessible & unstyled.
https://input-otp.rodz.dev
MIT License
2.52k stars 53 forks source link

Support alphanumeric #35

Closed deadcoder0904 closed 8 months ago

deadcoder0904 commented 8 months ago

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

inputMode="alphanumeric"

Implementation: https://github.com/pilcrowOnPaper/oslo/blob/c1f60eca2137cda93bb7aefed35781d85d12c7b6/src/crypto/random.ts#L52-L67

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

deadcoder0904 commented 8 months ago

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"}
/>
guilhermerodz commented 8 months ago

I think you might be referring to native HTML input's pattern attribute?

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

guilhermerodz commented 8 months ago

closing this for now, let me know if you run into any issues forward

deadcoder0904 commented 8 months ago

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 :)

deadcoder0904 commented 8 months ago

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?

Justbeingjustin commented 7 months ago

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