Input inside side menu unfocus but keyboard opens

ionic-v1
1

Hello, when I set an input inside side menu and open the menu the keyboard open and the input is not selected. Then when I close the side menu, keyboard do not close

image

Here is a codepen I done

http://codepen.io/Sir_Tesla/pen/BzvyVQ

but it’s not working as device bug

2

Hello,
with the ionic-keyboard plugin, you could close the keyboard when you close the side menu.

I think it would be the easiest solution

3

Not a bad solution for that. But what about opening menu. It shouldn’t show the keyboard, and open close faster it not a good practice I think.

4

Oh right I didn’t read properly. it seems that your input is focused when you open the menu, I dunno yet if it’s because the clic event is triggered on the input field when you click the burger icon, or for some other reason …

5

the strange thing here is that when I open the menu, the keyboard opens but the input isn’t focus (if I write no text shows on the input).
@JC_cap look at this video

6

I might have a trick but I’m really not sure about it.

$scope.isReady = false; 

$scope.onFocusInput = function(){
    if ($scope.isReady) 
       window.getElementById(#youInputId).focus()
    else
       e.preventDefault();
}

$scope.onClickMenu = function(){
     $timeout(function(){
           $scope.isReady = true;
     },500)
}

with
I think this would prevent the input from beeing focused immediately when you click on the menu, but I haven’t tried it yet.

Tell me about it :wink:

7

thought it work at first but no, because the input is not focusing. Maybe a plugin error?

8

Finally some adaptation from your code, this is the result that works

app.controller('AppCtrl', function($scope, $timeout, $ionicSideMenuDelegate, $cordovaKeyboard) {
    $scope.menuCall = function () {
    	$scope.searchEnabled = false;
        if($cordovaKeyboard.isVisible())
        {
            $cordovaKeyboard.close();
        }
        if(!$ionicSideMenuDelegate.isOpen())
        {
        	$timeout(function(){
		           $scope.searchEnabled = true;
		    },500);
        }   
    };
});

and the input like <input type="text" class="menu-search" placeholder="Search" ng-disabled="!searchEnabled">

1 Like
9

Well done, glad I could help !

1 Like