Skip to content

Default autofocus of the first input field is causing problems on iOS #594

@derwaldgeist

Description

@derwaldgeist

In my Cordova app, I had a huge problem on the very first page (which is the login page including the atForm template):

If I tried to tap the first input field (which is a combined username and email field) on iOS, nothing happened. I had to tap it 5-10 times, until the app reacted. This was an awful user experience, and I really feared that my users would turn away from my app just because of this first impression. Funny thing was that the password field below behaved much nicer. Though it also did not show up on the first tap, it should up at least on the second or third (which was still not optimal).

I was quite desperate and posted it on the Meteor forums, where I was lucky that user XDA gave me the hint this might be related to some JavaScript trying to set the focus of one of the fields, which causes problems on Cordova iOS under certain circumstances:

https://forums.meteor.com/t/cordova-useraccounts-keyboard-not-showing-up-in-ios-if-user-taps-username-field/14069/3

He also stated that setting the following preference in the Cordova mobile-config.xml file solves the issue:

App.setPreference("KeyboardDisplayRequiresUserAction",false);

And indeed, after I set this preference, the user input dialog behaved well.

I am writing this issue to suggest that you

  1. document these Cordova-related issues caused by the the default auto-focus
  2. hint the users that they either could set focusFirstInput to false (I was not aware that this option existed until I ran into these problems) or set the Cordova preference as described above.

Another idea would be to default the focusFirstInput setting to false in Cordova applications (using a Meteor.isCordova check) in the package. I personally think this would be a good idea anyways, since I do not expect a keyboard to "spring up out of nowhere" just because an input field is presented. That decision should IMHO at least be left to the author of the app. On desktop browsers, the situation is completely different, since your keyboard is under your fingers and does not take away any screen estate.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions