feat(keyboard): blur input on native keyboard hide

src/util/keyboard.ts

@@ -2,77 +2,84 @@ import { Injectable, NgZone } from '@angular/core';
 
 import { Config } from '../config/config';
 import { Form } from './form';
-import { hasFocusedTextInput, nativeRaf, zoneRafFrames, nativeTimeout } from './dom';
+import { hasFocusedTextInput, nativeRaf, nativeTimeout, zoneRafFrames } from './dom';
 import { Key } from './key';
 
+
 /**
  * @name Keyboard
  * @description
- * The `Keyboard` class allows you to work with the keyboard events provided by the Ionic keyboard plugin.
+ * The `Keyboard` class allows you to work with the keyboard events provided
+ * by the Ionic keyboard plugin.
  *
  * @usage
  * ```ts
- * export class MyClass{
- *  constructor(keyboard: Keyboard){
- *    this.keyboard = keyboard;
- *  }
- * }
+ * export class MyClass {
+ *   constructor(public keyboard: Keyboard) {
  *
+ *   }
+ * }
  * ```
  */
-
 @Injectable()
 export class Keyboard {
 
   constructor(config: Config, private _form: Form, private _zone: NgZone) {
     _zone.runOutsideAngular(() => {
       this.focusOutline(config.get('focusOutline'), document);
+
+      window.addEventListener('native.keyboardhide', () => {
+        // this custom cordova plugin event fires when the keyboard will hide
+        // useful when the virtual keyboard is closed natively
+        // https://github.com/driftyco/ionic-plugin-keyboard
+        if (hasFocusedTextInput()) {
+          this._form.focusOut();
+        }
+      });
     });
   }
 
-
-/**
- * Check to see if the keyboard is open or not.
- *
- * ```ts
- * export class MyClass{
- *  constructor(keyboard: Keyboard){
- *    this.keyboard = keyboard;
- *  }
- *  keyboardCheck(){
- *    setTimeout(()  => console.log('is the keyboard open ', this.keyboard.isOpen()));
- *  }
- * }
- *
- * ```
- *
- * @return {boolean} returns a true or flase value if the keyboard is open or not
- */
+  /**
+   * Check to see if the keyboard is open or not.
+   *
+   * ```ts
+   * export class MyClass {
+   *   constructor(public keyboard: Keyboard) {
+   *
+   *   }
+   *
+   *   keyboardCheck() {
+   *     console.log('The keyboard is open:', this.keyboard.isOpen());
+   *   }
+   * }
+   * ```
+   *
+   * @return {boolean} returns a true or false value if the keyboard is open or not.
+   */
   isOpen() {
     return hasFocusedTextInput();
   }
 
-/**
- * When the keyboard is closed, call any methods you want
- *
- * ```ts
- * export class MyClass{
- *  constructor(keyboard: Keyboard){
- *    this.keyboard = keyboard;
- *    this.keyboard.onClose(this.closeCallback);
- *  }
- *  closeCallback(){
- *     // call what ever functionality you want on keyboard close
- *     console.log('Closing time');
- *  }
- * }
- *
- * ```
- * @param {function} callback method you want to call when the keyboard has been closed
- * @return {function} returns a callback that gets fired when the keyboard is closed
- */
+  /**
+   * When the keyboard is closed, call any methods you want.
+   *
+   * ```ts
+   * export class MyClass {
+   *   constructor(public keyboard: Keyboard) {
+   *     this.keyboard.onClose(this.closeCallback);
+   *   }
+   *   closeCallback() {
+   *     // call what ever functionality you want on keyboard close
+   *     console.log('Closing time');
+   *   }
+   * }
+   * ```
+   *
+   * @param {function} callback method you want to call when the keyboard has been closed.
+   * @return {function} returns a callback that gets fired when the keyboard is closed.
+   */
   onClose(callback: Function, pollingInternval = KEYBOARD_CLOSE_POLLING, pollingChecksMax = KEYBOARD_POLLING_CHECKS_MAX) {
-    console.debug('keyboard onClose');
+    console.debug(`keyboard, onClose created`);
     const self = this;
     let checks = 0;
 
@@ -84,10 +91,10 @@ export class Keyboard {
     }
 
     function checkKeyboard() {
-      console.debug('keyboard isOpen', self.isOpen());
+      console.debug(`keyboard, isOpen: ${self.isOpen()}`);
       if (!self.isOpen() || checks > pollingChecksMax) {
         zoneRafFrames(30, () => {
-          console.debug('keyboard closed');
+          console.debug(`keyboard, closed`);
           callback();
         });
 
@@ -102,12 +109,11 @@ export class Keyboard {
     return promise;
   }
 
-/**
- * Programmatically close the keyboard
- *
- */
+  /**
+   * Programmatically close the keyboard.
+   */
   close() {
-    console.debug('keyboard close()');
+    console.debug(`keyboard, close()`);
     nativeRaf(() => {
       if (hasFocusedTextInput()) {
         // only focus out when a text input has focus
@@ -116,9 +122,9 @@ export class Keyboard {
     });
   }
 
-/**
- * @private
- */
+  /**
+   * @private
+   */
   focusOutline(setting: any, document: any) {
     /* Focus Outline
      * --------------------------------------------------
@@ -132,7 +138,7 @@ export class Keyboard {
      * focusOutline: false    - Do not add the focus-outline
      */
 
-    let self = this;
+    const self = this;
     let isKeyInputEnabled = false;
 
     function cssClass() {