IOS- Show keyboard on input focus

Asked Jul 10 '23 at 14:48

Active Jul 13 '23 at 16:18

Viewed 191 times

I have an input box in react, I have passed the focus prop to make the input focused when someone lands on the component.

On Android, it works well, it focuses the input and pops up the keyboard.

On iOS, it does not work well, it focuses the input but does not shows the keyboard implicitly. I need to click on the input again to pops the keyboard.

I want that as soon as the user lands on the page, the keyboard shows up.

Here is the code: https://github.com/ritikbanger/react18-input-otp/blob/main/src/lib/index.jsx

Here is code sand box for the same: https://codesandbox.io/s/react18-input-otp-0nxzx7?file=/src/App.js

I have tried the following solutions but does not worked:

asked Jul 10 '23 at 14:48

Ritik Banger

2,107
5
25

where do you call focus command? can you call it with delay for testing? for example after render. – Maziar Saadatfar Jul 18 '23 at 07:23
@MaziarSaadatfar I have used it here- https://github.com/ritikbanger/react18-input-otp/blob/9245ec1579f251ed88a3c0f754e34c160e87eab7/src/lib/index.jsx#L30 Also, it is set after the componentDidMount is called i.e. after render – Ritik Banger Jul 18 '23 at 09:07
can you add a delay for focus just for testing? I want to make sure the issue is not for lifecycle. – Maziar Saadatfar Jul 18 '23 at 09:10
Okay, let me try with a delay. – Ritik Banger Jul 18 '23 at 11:26
FYI, the input is focused already but the keyboard does not pops up on iOS. – Ritik Banger Jul 18 '23 at 11:26
Not working with delay @MaziarSaadatfar – Ritik Banger Jul 20 '23 at 05:11
If I recall correctly, iOS tries hard to thwart this as they feel it takes away control from the user... can't recall if there is a way to force the keyboard on this – scunliffe Jul 20 '23 at 13:57
1

@scunliffe That's why I am looking for a workaround – Ritik Banger Jul 20 '23 at 14:21

IOS- Show keyboard on input focus

0 Answers0