tapping ion-checkbox brings up keyboard on Android < 4.4

[ateufel]

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]

Hey what device and version of Android are you using?
I'm unable to reproduce this with a few simple tests, could you provide some simple code that replicates the issue?

[ateufel]

device: samsung galaxy nexus
android: 4.3 (pure android, no mod)

my app is based on the tabs template, i am just beginning with ionic and cordova (may be an important information), here´s the relevant code of my template:

<ion-view title="Eingabe">
    <ion-content class="has-header">
        <!--<div class="row row-center text-center">
            <div class="col">
                <h1>
                    <a class="button icon-left ion-chevron-left button-clear button-dark"></a>
                    {{data.year}}
                    <a class="button icon-right ion-chevron-right button-clear button-dark"></a>
                </h1>
            </div>
        </div>-->
        <div class="list">
            <div class="item item-divider">
                Eingabe
            </div>
            <label class="item item-input item-stacked-label">
                <span class="input-label">Einnahmen</span>
                <input type="number" ng-model="data.einnahmen" select-on-click blur-keyboard>
            </label>
            <label class="item item-input item-stacked-label">
                <span class="input-label">Ausgaben</span>
                <input type="number" ng-model="data.ausgaben" select-on-click blur-keyboard>
            </label>
            <ion-checkbox ng-model="data.nosv">Some checkbox</ion-checkbox>
            <div class="row row-center">
                <div class="col">
                    <button class="button button-large button-block button-energized" ng-click="calc()">Calculation</button>
                </div>
            </div>
        </div>
    </ion-content>
</ion-view>

the rest should not matter, i guess. even without any code in the controller, i got the same problem with the keyboard. if i click on the checkbox, the keyboard pops up again. if i put in some labels after the checkbox and click on them, the keyboard pops up.

[tlancina]

Yeah I see the issue, taking a look at it now.

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

[ateufel]

thanx for the help so far, i will test it in the next hours and get back to you!

[ateufel]

the hack works very well, thank you very much! i can live with the highlight box for now, no big deal. will this issue stay open until there is a real fix? would be nice for me to know when you found a better solution, so i can remove the hack :)

[tlancina]

@ateufel glad it works! I'm leaving this open for now and I've changed the title to reflect the underlying issue.

[calendee]

@mhartington : Isn't this really a bug not a feature? Shouldn't it stay as ann open issue?