1

Is there a simple way to define an input field in React that would receive focus by default, but NOT on the mobile device? The reason is that the user experience is poor when you navigate to a page on an i.e. iPhone and by default half of the screen is hidden by the on screen keyboard, so you are not even sure what you are supposed to type.

Good example of the required behavior is the Facebook login page. When logged out go to facebook.com on a desktop and the focus is by default in the email field so you can start typing right away. Visit the same page on an iPhone and there is no default focus which lets you see clearly the whole page and you have to tap on the email field to start typing.

The 'manual' way of solving the issue would be to check for current screen height and set autoFocus prop on the input if screen is not tall enough. However I'm wondering if there is a more streamlined solution to this issue?

The following is how to set autofocus in React on any device (not the answer to my question):

<input autoFocus />
mrt
  • 1,669
  • 3
  • 22
  • 32
  • 1
    Well if you have a node backend or for that matter any backend stack you can check using user agent if it's a mweb or web and accordingly pass some Param to the front end and on react side check and set auto focus to true or false. This is similar to your approach but instead of checking the height and width, I rely on user agent header. – VivekN Mar 23 '18 at 11:28
  • you could ask for the screenwidth and then set the attribute as ternary to true or false. something like: ``` – Paulquappe Mar 23 '18 at 11:28

0 Answers0