fix(tabs): hide tabbar when keyboard opens

src/components/tabs/tabs.ts

@@ -5,6 +5,7 @@ import { Config } from '../../config/config';
 import { DeepLinker } from '../../navigation/deep-linker';
 import { Ion } from '../ion';
 import { isBlank, assert } from '../../util/util';
+import { Keyboard } from '../../platform/keyboard';
 import { Tabs as ITabs } from '../../navigation/nav-interfaces';
 import { NavController } from '../../navigation/nav-controller';
 import { NavControllerBase } from '../../navigation/nav-controller-base';
@@ -151,7 +152,7 @@ import { ViewController } from '../../navigation/view-controller';
 @Component({
   selector: 'ion-tabs',
   template:
-    '<div class="tabbar" role="tablist" #tabbar>' +
+    '<div class="tabbar" role="tablist" #tabbar [hidden]="_tabbarHidden">' +
       '<a *ngFor="let t of _tabs" [tab]="t" class="tab-button" role="tab" href="#" (ionSelect)="select(t)"></a>' +
       '<div class="tab-highlight"></div>' +
     '</div>' +
@@ -177,6 +178,10 @@ export class Tabs extends Ion implements AfterViewInit, RootNode, ITabs {
   _selectHistory: string[] = [];
   /** @internal */
   _resizeObs: any;
+  /** @internal */
+  _keyboardObs: any;
+  /** @internal */
+  _tabbarHidden = false;
 
   /**
    * @input {number} The default selected tab index when first loaded. If a selected index isn't provided then it will use `0`, the first tab.
@@ -231,7 +236,8 @@ export class Tabs extends Ion implements AfterViewInit, RootNode, ITabs {
     elementRef: ElementRef,
     private _plt: Platform,
     renderer: Renderer,
-    private _linker: DeepLinker
+    private _linker: DeepLinker,
+    keyboard?: Keyboard
   ) {
     super(config, elementRef, renderer, 'tabs');
 
@@ -261,9 +267,26 @@ export class Tabs extends Ion implements AfterViewInit, RootNode, ITabs {
       viewCtrl._setContent(this);
       viewCtrl._setContentRef(elementRef);
     }
+
+    if (keyboard) {
+      keyboard.didChange.subscribe((visible: boolean) => {
+        // TODO: this is a hacky implementation
+        // debouncing should be properly implemented in the native side
+        if (visible) {
+          this._tabbarHidden = visible;
+          this.resize();
+        } else {
+          setTimeout(() => {
+            this._tabbarHidden = visible;
+            this.resize();
+          }, 100);
+        }
+      });
+    }
   }
 
   ngOnDestroy() {
+    this._keyboardObs && this._keyboardObs.unsubscribe();
     this._resizeObs && this._resizeObs.unsubscribe();
     this.parent.unregisterChildNav(this);
   }

src/components/tabs/test/advanced/pages/tab1-page1/tab1-page1.html

@@ -16,6 +16,7 @@
   <p><button ion-button (click)="color = !color" [color]="color ? 'primary':'secondary'">Change color</button></p>
   <p>"Change color" should continue working after clicking Logout in the tabbar and cancelling (No in the alert)</p>
   <p>UserId: {{userId}}</p>
+  <p><ion-input></ion-input></p>
   <div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div>
   <div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div>
 

src/platform/keyboard.ts

@@ -43,36 +43,39 @@ export class Keyboard {
     this.focusOutline(config.get('focusOutline'));
 
     const win = <any>_plt.win();
-    const usingIonicEngine = win.Ionic && win.Ionic.KeyboardEvents === true;
-    if (usingIonicEngine) {
-      this.listenV2(win);
-    } else {
-      this.listenV1(win);
-    }
+    // const usingIonicEngine = win.Ionic && win.Ionic.KeyboardEvents === true;
+    // if (usingIonicEngine) {
+    //   this.listenV2(win);
+    // } else {
+    //   this.listenV1(win);
+    // }
+    this.listenV2(win);
   }
 
   private listenV2(win: any) {
-    this._plt.registerListener(win, 'native.ionic.keyboardWillShow', () => {
-      this.willShow.emit();
-    }, { zone: true, passive: true });
+    this._plt.registerListener(win, 'keyboardWillShow', () => {
+      this._zone.run(() => this.willShow.emit());
+    }, { zone: false, passive: true });
 
-    this._plt.registerListener(win, 'native.ionic.keyboardWillHide', () => {
-      this.willHide.emit();
+    this._plt.registerListener(win, 'keyboardWillHide', () => {
+      this._zone.run(() => {
+        this.willHide.emit();
+        this.didChange.emit(false);
+      });
       this._plt.focusOutActiveElement();
-    }, { zone: true, passive: true });
+    }, { zone: false, passive: true });
 
-    this._plt.registerListener(win, 'native.ionic.keyboardDidShow', () => {
-      this.didShow.emit();
-      this.didChange.emit(true);
-    }, { zone: true, passive: true });
+    this._plt.registerListener(win, 'keyboardDidShow', () => {
+      this._zone.run(() => {
+        this.didShow.emit();
+        this.didChange.emit(true);
+      });
+    }, { zone: false, passive: true });
 
-    this._plt.registerListener(win, 'native.ionic.keyboardDidHide', () => {
-      this.didHide.emit();
-      this.didChange.emit(false);
-    }, { zone: true, passive: true });
+    this._plt.registerListener(win, 'keyboardDidHide', () => {
+      this._zone.run(() => this.didHide.emit());
+    }, { zone: false, passive: true });
     this.eventsAvailable = true;
-
-
   }
 
   // TODO: deprecate once ionic-engine is released

src/platform/platform-registry.ts

@@ -243,8 +243,8 @@ export const PLATFORM_CONFIGS: { [key: string]: PlatformConfig } = {
 };
 
 function keyboardResizes(plt: Platform): boolean {
-  const win = <any>plt.win;
-  if (win.Ionic && win.Ionic.KeyboardResizes === true) {
+  const win = <any>plt.win();
+  if (win.Ionic && win.Ionic.keyboardResizes === true) {
     return true;
   }
   return false;