NhatHM NhatHM - 3 years ago 208
Android Question

Ionic keyboard and ngIf work not as expected

I have issue with:

  • Keyboard show/hide event (i'm using ionic keyboard)

  • Angular js 2 *ngIf to show/hide button in navigation bar when keyboard show/hide


  • I'm using ionic v2 to build application. My app have 3 tab bars (like default ionic app when run command ionic start).

  • In first tab, I add 2 buttons in navigation bar using one button is "start" type, other is "end" type. The "start" type button is Cancel button. Also have for input value.

  • My requirement is when user tap inside field, keyboard will show. When keyboard show, I'm using *ngIf to show button (Cancel button). And when keyboard hide, I'll hide button.

Everything works fine in iOS's devices. But in Android, it works not as expected. The first time I tap field, button Cancel not show (keyboard show up already), then I tap outside field, keyboard hidden and Cance button show up, not as I expected.

Steps to reproduce:
I'm commit source code into: https://github.com/RioV/ionic2Study
1. npm install
2. ionic platform add ios/android
3. build app into android device.
4. In Home tab, tab Input number field to show device's keyboard, button Cancel not show (I expected it show up)
5. Tap outside Input number field to hide keyboard, button Cancel show up.

Which Ionic Version? CLI v2.0.0-beta.32

Run ionic info from terminal/cmd prompt: (paste output below)
Cordova CLI: 6.2.0
Ionic Framework Version: 2.0.0-beta.9
Ionic CLI Version: 2.0.0-beta.32
Ionic App Lib Version: 2.0.0-beta.18
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v6.2.1
Xcode version: Xcode 7.3.1 Build version 7D1014

I'm testing in
iPhone 5s, iOS 8.4: OK
iPad mini 3, iOS 9.3.1: OK
Nesus 7, Android 5.0.2: NG

Is anyone have this issue before?
I posted to drifty's github, ionic forum but not response yet :(

Answer Source

There is a bug with the Keyboard plugin.

You need to wrap the calls to update the controlShowHide object in a zone.run call.

zone.run( () => {
    console.log('KEYBOAD SHOW');
    self.controlShowHide['cancelButton'] = true;
    console.log("keyboardShowHandler Value is: ", self.controlShowHide['cancelButton']);

Go ahead and throw some styles on your button. I saw an issue there too.

<ion-buttons *ngIf="controlShowHide.cancelButton === true" start>
    <button secondary (click)="invokeButtonCancel()">

I hope this helps you. I will file a bug report about the keyboard plugin zone issue.

Thanks, Dan

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download