Keyboard doesn't show on shouldAutoFocus on iOS

[m00gl3]

Something about the way it is implemented. If it were a simple input with autoFocus - then the keyboard shows (i tried)
But setting shouldAutoFocus on this OtpInput focuses the element, but doesn't show keyboard

You can see it doesn't work on your demo as well in Sandbox. Just go to that url from iOS and you'll see what I mean

I also tested react-input-otp (v3.0.0) on this and it works (meaning shouldAutoFocus is set and the input is focused and keyboard shows)

iPhone SE, iOS 16.4.1
Chrome Browser

[wdragon]

We see the same issues on our end as well. Is there an estimate to fix it?

[ritikbanger]

I will fix this by June end. I am not getting time to fix this out. I would be happy if anyone raise a PR for this.

[ritikbanger]

Hello @m00gl3 , @wdragon I tried reproducing this but seems like it is working fine. Could you share me a screen recording of your end, Also, can you confirm that shouldAutoFocus prop is set to true or passed to the OtpInput?

Can you try this again here: https://codesandbox.io/s/react18-input-otp-0nxzx7?file=/src/App.js

screen-capture.36.webm

[ritikbanger]

Could you please confirm the issue @m00gl3 @wdragon

[m00gl3]

Hi,
The video is not depicting the scenario I was encountering.
The first page you're on should NOT have the OTP (something like "enter phone number") with an input for the phone.

I click on "Submit" and then move to the page WITH the OTP - and there - setting autoFocus doesn't focus and show the keyboard. I tried to "trick" the browser by having the OTP hidden on the SAME page as the Input and only showing it once you click Submit, but that didn't work either.

[ritikbanger]

There are only tricks around the web on this. I don't think that adding a hidden input field in the package would be good. What do you think?

[ritikbanger]

@m00gl3 @wdragon

This is a problem with how iOS infers the "focus", due to some sort of security reason, it does not allow to pop the keyboard if the element is focused. The autofocus property doesn't work from a url in Mobile Safari but does work if you are:

1. using a UIWebView
2. using a home screen link

There are hacks i.e. create hidden element and programatically focus on the input.

Here is a link for reference- StackOverflow

I hope this will help!

[ritikbanger]

I am moving this to a discussion as of now as the problem can be fixed in the application itself, I am also looking to fix this by moving the codebase to use "hooks" instead of "classes".