Bring instant focus to Android after focusing on javascript

Question

I am working on an Ionic App with AngularJS.

I have little input (signin / signup stuff), and when the Enter key is pressed -go on android and the iOS equivalent, which is equal to KeyCode 13 , it focuses on the next input using a custom directive.

It works fine in a web browser, but on the phone it focuses the next input, then the focus is lost instantly, and the keyboard hides, forcing the user to click on the input again.

Here is the HTML :

 <ion-view title="First Screen" hide-nav-bar="true" id="firstScreen" class=" "> <ion-content padding="false" style="background: url(img/XAYpMMdUTvWFVAnrEhUi_restaurant.jpg) no-repeat center;background-size:cover;" class=" manual-remove-top-padding" scroll="false"> <div class=""> <img src="img/awdYDbeeSlSHCToXN5Lw_logo.png" width="auto" height="30%" style="display: block; margin-left: auto; margin-right: auto;"> </div> <label class="item item-input " id="emailInput" name="email"> <input class="invisible-input" type="email" placeholder="Email" ng-model="user.email" focus-me="currentInput == 0" ng-keyup="inputKeyEvent($event, 0)"> </label> <label class="item item-input " id="passwordInput" name="password"> <input class="invisible-input" type="password" placeholder="Mot de passe" focus-me="currentInput == 1" ng-model="user.password" ng-keyup="inputKeyEvent($event, 1)"> </label> <label ng-show="isSignUp" class="item item-input " ng-class="{'animated fadeInLeft': isSignUp, 'animated fadeOutLeft' : !isSignUp && changed }" id="confirmPasswordInput" name="password"> <input class="invisible-input" type="password" placeholder="Confirmation du mot de passe" focus-me="currentInput == 2" ng-model="user.confirmation" ng-keyup="inputKeyEvent($event, 2)"> </label> <div> {{response}} </div> <div class="actionButtonContainer"> <button ng-click="signin()" id="loginButton" class=" button button-balanced button-full">Se oonnecter</button> <button ng-click="signup()" id="signupButton" class=" button button-energized button-full" ng-disabled="disableSignUp()">S'inscrire</button> </div> </ion-content> 

Here is the directive :

 directive('focusMe', function() { return { link: function (scope, element, attrs) { scope.$watch(attrs.focusMe, function (value) { if (value === true) { element[0].focus(); } }); } }; 

And here management methods are used:

 $scope.inputKeyEvent = function(event, inputId) { $scope.response = event.keyCode; if (event.keyCode == 13) { $scope.currentInput = inputId + 1; if ($scope.currentInput == 2 && !$scope.isSignUp) $scope.signin(); else if ($scope.currentInput == 3 && $scope.isSignUp) $scope.signup(); } } 

Thank you for your help!

EDIT

The problem was in my genymotion emulator, it works fine on a real phone (at least mine.)

Answer 1

I think you should call the blur() method earlier for an unfocused element. I did it in ionic and cordova and it works great.

Also, wrap focus() in the next element in the timeout version ( $timeout for angular or setTimeout for vanillajs) so that the focus will be in a different area even after the blur is complete.

You should have something like this:

 $scope.inputKeyEvent = function(event, id) { // prevent default event.preventDefault(); // blur on the unfocused element event.target.blur(); // focus on next element // wrapped in timeout so it will run // in "another thread" $timeout(function() { // If you want to follow all angular best practices // Make a broadcast and read the event in the link function // of your directive var obj = document.getElementById(nextId); // Check if object exists if(obj) { obj.focus(); } }); } 

Answer 2

I made an example plunkr, and it works with my Samsung S5. There is no such problem in your question as you describe. After I press the button (13), the focus will move to the next input element using the hiding keyboard or something like that.

Perhaps this is something with versions. I have not tested it with the built-in application. I open plunkr with my smartphone. Check this. Maybe you will get some kind of hint.

https://plnkr.co/edit/R8uRlzQpfSg7w37nKEKH?p=preview

(Why is it no longer possible to publish the plunkr link?)