React-select: autoFocus does not work on Safari mobile

Created on 5 Apr 2019 · 6Comments · Source: JedWatson/react-select

autoFocus does not work on Safari mobile.
The input shows the "focus" state, but the caret is not shown, which means that the <input> is not actually in focus so the keyboard is not shown.

https://codesandbox.io/s/93pz9n63py

Chrome - focused ✔️

2019-04-04 18 13 38

Safari - Mac - focused ✔️

2019-04-04 18 15 26

Safari - Mobile - Not actually in focus ❗️

2019-04-04 18 14 08

Source

csantos1113

👀1

Most helpful comment

@karlingen
Yes, we have. There was a comment about it in a ticket for WebKit. The comment was created March 2019, and states the following:

"We (Apple) like the current behavior and do not want programmatic focus to bring up the keyboard when [...] the programmatic focus was not invoked in response to a user gesture."

Source

Rall3n on 27 Sep 2019

👍3

All 6 comments

@csantos1113 Mobile Safari does not allow "real" focus without user interaction. With "real" focus I mean it sets the focused state so the focus events are called, but input is not allowed.

Rall3n on 8 Apr 2019

@Rall3n - you mean Safari mobile? because it works perfectly fine on "Safari - Mac"

csantos1113 on 9 Apr 2019

👍1

Yes, mobile safari. I have edited my answer.

Rall3n on 9 Apr 2019

👍3

@Rall3n do we have an official answer from Apple confirming that statement or is this just something you have discovered?

karlingen on 27 Sep 2019

@karlingen
Yes, we have. There was a comment about it in a ticket for WebKit. The comment was created March 2019, and states the following:

"We (Apple) like the current behavior and do not want programmatic focus to bring up the keyboard when [...] the programmatic focus was not invoked in response to a user gesture."

Source

Rall3n on 27 Sep 2019

👍3

Closing in favor of Apple's decision. Nothing we can do

csantos1113 on 2 Oct 2019

Was this page helpful?

0 / 5 - 0 ratings