ion-input with ion-label; keyboard closes

[Tobiaswk]

When you have an ion-input directive with an ion-label inside and you touch the ion-label the software keyboard will appear but disappear promptly after. This only happens if you touch the area with the input-label. This bug is reproducible on both Android and iOS.

I'm not sure precisely when this problem was introduced. I am on 'Copenhagen' right now. Sometime after 'Amsterdam'.

[adamdbradley]

Is this with Ionic v1 or Ionic v2? What does your markup look like?

[Tobiaswk]

Ionic v1.

Markup:

<ion-input class="item item-input">
                    <ion-label>
                        <translate>PIN-kode</translate>
                    </ion-label>
                    <input name="pin" type="tel" ng-model="pin.pin">
                </ion-input>

[crissi]

same here, tested on Android

It is the translate-directive that fucks it up, I am using the same translate plugin. Don't know why yet though.

[crissi]

Found what might be the issue: rubenv/angular-gettext#191

[crissi]

So ion-label does not allow html at all, for focus to work, only text, that seems like an error

[Tobiaswk]

Yes I'm using https://angular-gettext.rocketeer.be for translations. Here the translate-directive is used.

That does seem like an bug.

[crissi]

easy fix is just to put "pointer-events: none;" on the inner elements.

https://css-tricks.com/almanac/properties/p/pointer-events/

[Tobiaswk]

OK. That is great! Thanks!

But of course this needs to be fixed within ionic.

[Tobiaswk]

Just to close this off. Using the {{ 'text-to-translate' | translate }} I was able to overcome this problem. I'm not classifying this as a bug in ionic.