tapping ion-checkbox brings up keyboard on Android < 4.4

i am using the latest ionic build, but i am struggling with the keyboard (at least on android). i got an input field where you can enter a number:

<input type="number" blur-keyboard>

now when i enter it, the keyboard shows up as expected. when i hit “go”, it disappears, but leaves the blue input cursor of android in the input field. now when i click on any other part of the app (for example, i got a checkbox right after the input field), the keyboard pops up again. i started writing a directive (“blur-keyboard”) to hide the keyboard manually, but i don´t know how to to that:

.directive('blurKeyboard', function() {
    return function ($scope, $element, $attrs) {
        $element.bind('blur', function () {
            //TODO hide keyboard
        });
    };
})

is this a known issue? it´s a major problem, obviously. i can provide screenshots if my explanation is not understandable.

[tlancina]

This appears to be an issue with ion-checkbox. For various reasons, the checkbox itself isn’t styled, it’s hidden and instead a checkbox icon is styled whenever you click on the surrounding label.

Interestingly enough on Android < 4.4 if the checkbox has display: none or visibility: hidden you get the behavior you described. Also on iOS I noticed that tapping an ion-checkbox while the keyboard is open doesn’t close the keyboard, although it should.

I’m not sure of a good fix that won’t possibly break other things (namely #496), but you can try this CSS hack for your case in the meantime:

.checkbox.checkbox-input-hidden input {
  display: block !important;
  position: absolute;
}

So instead of hiding the checkbox it will simply be behind the icon, but still technically visible. Unfortunately you’ll now sometimes see the light blue Android highlight color when tapping the checkbox, but the keyboard should remain closed.

[tlancina]

Not much we can do for this, the recommendation is to use Crosswalk for older Android devices.