iOS keyboard reopens after close

[martyzz1]

Hi,

I've been trying to build a few buttons to sit above the keyboard using keyboard-attach. One of the buttons sole purpose is to close the keyboard.

I've tried every combination of the following, but always on iOS - when the buttons appear over a scrollable view (i.e. the view is bigger than the window) - OR maybe coincidence and the real issue is that the buttons appear over other input boxes, the keyboard - and the keyboard-open body class - are triggerred about half a second after the keyboard closes...

$scope.close = function() {
//do nothing, the blur when clicking the button should suffice
}

$scope.close = function($event) {
                cordova.plugins.Keyboard.close();
 }

$scope.close = function($event) {

                $event.preventDefault();
                $event.stopPropagation();
                var currElement = document.activeElement;
                currElement.blur();
                cordova.plugins.Keyboard.close();
                //$scope.bodyEl.removeClass('keyboard-open');
}

We did some digging by listening to the

window.addEventListener('native.keyboardshow', function(e) {
}

And it looks like the trigger for reshowing the keyboard is coming directly from the iOS code.

The only way I've managed to make this work is to add this code to all input elements of the page. Which temporarily disables the eventlistener inside ionic-keyboard so that the native.keyboardshow event is ignored.

angular.element(element).bind('blur', function (e) {
                            ionic.keyboard.disable();
                            $timeout(function() {
                                console.log('re-enabling keyboard');
                                ionic.keyboard.enable();
                            },500);
 })

Having looked at various bugs around this subject for a few days, It feels like its simillar https://forum.ionicframework.com/t/keyboard-reopens-when-closing-popup/18857

I also tried adding eventListeners like this:-

window.addEventListener('native.keyboardshow', function(e) {
                    console.log('native.keyboardshow fired', $scope.stayClosed, e.keyboardHeight);
                    if($scope.stayClosed){
                        console.log('Keyboard should remain closed', document.body.classList);
                        window.cordova.plugins.Keyboard.close();

                        var currElement = angular.element(document.activeElement);
                        console.log('activeElement', currElement);
                        currElement.blur();
                        $scope.bodyEl.removeClass('keyboard-open');
                        console.log('After Keyboard should remain closed', document.body.classList);
                    } else {
                        console.log('Allowing Keyboard Open', document.body.classList);
                        $scope.bodyEl.addClass('keyboard-open');
                        console.log('After Allowing Keyboard Open', document.body.classList);
                    }
                });

But when trying this, the keyboard itself would not reshow - the native.keyboardshow event occurs, my event forces the keyboard closed again, however the keyboard-attach buttons Remain on the page, as the 'keyboard-open' body class doesn't get removed - despite me explicitely removing it.

I was wondering if anybody else has found this issue?

[JLLLinn]

It also happened to me. Has anyone found a solution yet?

[dmr07]

+1

[kevinpoirier]

I have the same issue. :( With ion autocomplete in ion-header-bar. At the moment who I hide the ion autocomplete.

Any idea?

[johnnynode]

I figure out what it causes , I think it's an ios and webview bug , when the webview is up ,but the ios layout is there , the old input position is still there when the input blur it may trigger other input focus and therefore make the issue happen. My sulution is blow:

html:

<input type="password" placeholder="password" maxlength="60" ng-model="password"
       ng-disabled="iosDebug"/>

js:

/* when blur or push login btn call the function below */
function iosKbDebug(){
    if(!ionic.Platform.isIOS()) return;
    $scope.iosDebug = true;
    $timeout(function(){
        $scope.iosDebug = false;
     },500);
}

[sjosen]

This works for me setTimeout(() => Keyboard.close(), 500);