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 ...