diff --git a/src/util/keyboard.ts b/src/util/keyboard.ts index 04f67aeb49..8b347d761d 100644 --- a/src/util/keyboard.ts +++ b/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() {