IOS Close Keyboard does not get ion content back

It seems like the ionic does not know the keyboard is closed.

In IOS, the keyboard will be closed if I click any element in the UI, but the content is still pushed up.

see the images below.


First image shows content of my app, it has a map in the main view and search bar in top.


Second image shows I typed in the search bar and autocomplete results shows.

If I close keyboard on the “done” button, everything back to normal.

BUT If I choose one the item in the dropdown from search bar, the keyboard will close, but the ionic content is still PUSHED UP! like below

Anyone has any ideas why this happens? Really need help. @mhartington

BTW, it’s working totally fine in android.

This is a simulator setting, press CMD-K to toggle the software keyboard

This is not the keyboard issue. It HAPPENS on REAL device. It’s just more convenient to do screen shot on emulator.

The issue still exists!

I’m debugging through develop console in safari and found out
The was added css style when keyboard opens with following:

ion-content.scroll-content.ionic-scroll.has-tabs {
height: 272px;
overflow: visible;
}

When I close the keyboard by press “Done”, this attribute was deleted.

HOWEVER, if I just click on of the items from dropdown, this css attribute still exists.

Any fix for this?

PS: adding more screenshots from my phone.

It is temporally fixed by the following code.

angular.element(document.querySelector(‘ion-content.scroll-content.ionic-scroll.has-tabs’)).removeAttr(‘style’);

angular.element(document.querySelector(‘ion-content.scroll-content.ionic-scroll.has-tabs div.scroll’)).css(‘transform’,‘translate3d(0px, 0px, 0px) scale(1)’);

Basically I removed the height and scroll the content up.

Same thing happens when pressing the “Enter/Open” key on iOS or “Go” on Android within a textfield to close the keyboard. The Form will be submitted, the keyboard hides but ion-content remains with the same height. I does not matter if tabs are used. I just use normal ion-content.

I’m using Crosswalk and I’m NOT using the com.ionic.keyboard plugin since it was causing more problems than it should solve…

Here is the code. It basically applies the values to the model on blur and on “Enter/Open/Go” only.

<input type="text" update-on-enter="submitButton" ng-model="search.search" ng-model-options="{ updateOn: 'blur' }">
<button id="submitButton" class="button button-block button-sreal">Submit</button>

And the directive:

.directive('updateOnEnter', function() {
return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attrs, ctrl) {
        element.bind("keyup", function(ev) {
            if (ev.keyCode == 13) {
                ctrl.$commitViewValue();
                scope.$apply(ctrl.$setTouched);
                if(attrs.updateOnEnter) {
                	document.getElementById(attrs.updateOnEnter).focus();
               }
            }
        });
    }
}});

Workaround for now:

.directive('updateOnEnter', function() {
return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attrs, ctrl) {
        element.bind("keyup", function(ev) {
            if (ev.keyCode == 13) {
                ctrl.$commitViewValue();
                scope.$apply(ctrl.$setTouched);
                if(attrs.updateOnEnter) {
                	document.getElementById(attrs.updateOnEnter).focus();
            	}
            	Remove on ALL ion-content elements (!)
                angular.element(document.getElementsByTagName('ion-content')).removeAttr('style');
                $ionicScrollDelegate.resize();
            }
        });
    }
}});

$ionicScrollDelegate.resize(); I think does something similar than this transform from @FMD