https://supertokens.com/ logo
Join Discord
Powered by
Hi, is there any way to make the OTP input field o...
# support-questions-legacy
i
Hi, is there any way to make the OTP input field open a numbers-only keyboard?
r
hey @inmesh6909
Perhaps @porcellus can help here
p
Hi
You could do this by customizing/overriding the input form.
There are multiple ways to go about it, but the easiest I think is just using JS to change the input type of the DOM element
Give me a few mins, I'll come up with a snippet for you 🙂
i
Since this form seems to expect a 6 digit code, would it make more sense for SuperTokens to change the 
inputType
on its own side? Seems to make more sense than having users override the form field.
p
That's not always the case, so we went with a frontend that supports all kinds of OTPs, but maybe we should make that change since our default is 6 digits.
i
Ah, that's unfortunate. There's no way to switch the 
inputType
based on the method being used?
r
you can - using JS as @porcellus will show shortly.
p
So the kind of OTP you get is configured on the backend (and it's entirely cusomizable) and we don't really send that information to the frontend
So you can't really change the FE based on that
You can override the OTP input form component like this:
Copy code
override: {
                components: {
                    PasswordlessUserInputCodeForm_Override: ({DefaultComponent, ...props}) => {
                        useLayoutEffect(() => {
                            document.querySelector("#supertokens-root").shadowRoot.querySelector("[name=userInputCode]").inputMode = "numeric";
                        })
                        return <DefaultComponent {...props} />
                    }
                }
            }
which will change the input type to number
(this goes into the configuration of the Passwordless recipe on the frontend)
Now this will show "arrows" in the input which you have to (or rather should) hide by CSS
I can give you an example of that as well, but looking at the screenshot you already do that kind of stuff 🙂
i
Wait wait wait! Safer idea, as 
type=number
often can cause unexpected problems.
inputMode
is the way we wanna go. Guarantees the correct keyboard pops up without having to fight the styles or confuse Screen Readers.
p
The only issue being Safari support 🙂
i
So iOS Safari does support 
inputMode
iOS Safari is different from MacBook Safari. There is no reason for MacBooks to support 
inputMode
because users will already have a physical keyboard they're using
p
oh I didn't know it worked on iOS
i
Yeah. I almost got tricked by that compatibility table too 😅
Yup. Works on iOS (I have tested it before). Irrelevant for MacBooks and such
p
Updated the snippet, thanks for the tip 🙂
i
My pleasure!
i
it worked, thanks!
p
happy to help 🙂
2 Views
PreviousNext
Powered by