Input is auto focusing on state transition

ionic-v1
1

I have a dirt simple template where I am showing a bunch of inputs. When I transition to this state, for some reason Cordova auto focuses on an input field and brings up the keyboard.

I’ve tried everything and I can’t figure out why.

Has anyone else seen this?

Any thoughts on how to prevent this?

Thanks!

3 Likes
2

An interesting wrinkle…

I randomly put a ui-sref on an image element further up the page on the previous template, and the issue went away.

It turns out that the input auto-focusing is not an auto-focus but rather a lingering touch from the previous state. The input I thought was auto-focusing just happens to be placed on the same relative location as the link on the previous template.

So I touch a link with a ui-sref in one state, and the same touch event is focusing on an input in the next state.

Has anyone bumped into this?

3

Could this be what is at play here?

http://ionicframework.com/docs/api/page/tap/

4

Answer: yes.

I put data-tap-disabled="true" on the parent element and the lingering input focus on the next step went away.

Is there a workaround for this? Because now the click event feels noticeably sluggish.

1 Like
5

Anyone have a solution to this yet? This is an extremely annoying problem…

6

The issue is resolved for me but I honestly don’t remember what I did other than what is posted here. Sorry I can’t be of more help!

7

I don’t know if you’ve found a solution yet, but disabling tap on the offending button does work to fix the problem for me, but I think another workaround might be to have a transparent overlay div that blocks input on page you’re transitioning to that gets hidden/removed once the transition is over. I have yet to try it but I’m guessing the problem is the animation of the transition is causing some goofiness in the tap detection. I’m thinking in your view controller you do something like

$scope.$on('$ionicView.afterEnter', function () {
   $scope.showTapBlock = false; // this variable controls ngShow/Hide?
});
8

My final solution was to add a css style:

.prevent-ghost-click {
  pointer-events: none;
}

that gets removed after 300ms after the state is rendered.

9

I have been having the same issue on iOS devices :

It turns out that the input auto-focusing is not an auto-focus but rather a lingering touch from the previous state. The input I thought was auto-focusing just happens to be placed on the same relative location as the link on the previous template

If anyone needs an other workaround, here’s mine :

  • on the form html tag, I added ng-if=“!tapBlocked”

  • in my controller, I added the following lines :

    $scope.$on(‘$ionicView.beforeEnter’, function () {
    $scope.tapBlock = true;
    });

    $scope.$on(‘$ionicView.afterEnter’, function() {
    $timeout( function() {
    $scope.tapBlock = false;
    }, 300);

    });

10

tried this, couldn’t work :frowning:

managed to get $ionicBackdrop working. Only issue, navigating around screens with $ionicBackdrop is so slow :frowning:

is there a better way to handle this?

11

Hey guys,

my issue was the same…

I have 2 tabs both included some textareas, when switiching tabs there will come up an popup, asking the user if he really wants to leave.

After click on okay (okay was at the same position than the textarea of the other tab). sometimes… the keyboard opened and jumped into the textarea, sometimes the keyboard opens without any focus and sometimes the keyboard did not open…

SOLUTION FOR ME:
Pretty simple but works for me.

 $scope.$on('$ionicView.beforeEnter', function() {
 $scope.disabledText = true;
  });

   $scope.$on('$ionicView.enter', function() {

    $timeout( function() {

     $scope.disabledText = false;

    }, 350);
  });

Then just put ng-readonly over the wrong focused field like that:

<textarea ng-readonly="disabledText"></textarea>

The good thing is that the keyboard wont show up because the textarea (works with any input field) is not clickable until the 350 mseconds are over.