Prevent IOS autofocus first input when page opens ionic

Question

There is a page in our app that has a single input field. When going to that state on IOS, the keyboard automatically pops up. This is not what is desired. This doesn't happen on the Android version.

I've tried all sorts of things, but nothing is sorting it. My last attempt was to call $cordovaKeyboard.close() in the app.js run block within a $stateChangeSuccess handler. Alas, nothing.

Any pointers would be greatly appreciated!

There's not much to put in code terms. The offending input:

<ion-item class="item-input-inset">
  <label class="item-input-wrapper bg-light-grey-30 text-center">
    <input type="text" class="text-center tracker" ng-model="values.exploreSearch" placeholder="Enter city, street, username or keyword"/>
  </label>
</ion-item>

And the JS in the $ionicPlatform.ready block in the main app.js run block:

$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams, error) {
  if (window.cordova && $cordovaKeyboard.isVisible) {
    $cordovaKeyboard.close();
  }
});

I previously tried putting a block in the page controller that looked like this:

$ionicPlatform.ready(function () {
  if (window.cordova && $cordovaKeyboard.isVisible) {
    $cordovaKeyboard.close();
  }
}]);

This last block, according to my client (as I don't have an IOS device to test on), worked the first time the page loaded, but not subsequently. If you left the page, and came back, the keyboard would pop up.

Answer 1

I had the same issue, and it seems to have something to do with the way the iOS browser sends click events (more here: http://blog.ionic.io/hybrid-apps-and-the-curse-of-the-300ms-delay/)

The way I worked this out was to hide my form on $stateChangeStart and then show the form 400ms later. An slightly better way is to have a transparent div covering everything, that you hide 400ms after $ionicView.enter.

<div style="position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; z-index: 1000;" ng-hide="showFields" class="ng-hide"></div>