chore(focus): create reusable focusOutActiveElement()

src/components/action-sheet/action-sheet-component.ts

@@ -1,7 +1,7 @@
 import { Component, Renderer, ElementRef, HostListener, ViewEncapsulation } from '@angular/core';
 
 import { Config } from '../../config/config';
-import { Form } from '../../util/form';
+import { focusOutActiveElement } from '../../util/dom';
 import { Key } from '../../util/key';
 import { NavParams } from '../../navigation/nav-params';
 import { ViewController } from '../../navigation/view-controller';
@@ -60,7 +60,6 @@ export class ActionSheetCmp {
     private _viewCtrl: ViewController,
     private _config: Config,
     private _elementRef: ElementRef,
-    private _form: Form,
     gestureCtrl: GestureController,
     params: NavParams,
     renderer: Renderer
@@ -123,7 +122,7 @@ export class ActionSheetCmp {
   }
 
   ionViewDidEnter() {
-    this._form.focusOut();
+    focusOutActiveElement();
 
     let focusableEle = this._elementRef.nativeElement.querySelector('button');
     if (focusableEle) {

src/util/dom.ts

@@ -251,9 +251,11 @@ export function isTextInput(ele: any) {
   return !!ele &&
          (ele.tagName === 'TEXTAREA' ||
           ele.contentEditable === 'true' ||
-          (ele.tagName === 'INPUT' && !(/^(radio|checkbox|range|file|submit|reset|color|image|button)$/i).test(ele.type)));
+          (ele.tagName === 'INPUT' && !(NON_TEXT_INPUT_REGEX.test(ele.type))));
 }
 
+export const NON_TEXT_INPUT_REGEX = /^(radio|checkbox|range|file|submit|reset|color|image|button)$/i;
+
 export function hasFocusedTextInput() {
   const ele = <HTMLElement>document.activeElement;
   if (isTextInput(ele)) {
@@ -262,6 +264,11 @@ export function hasFocusedTextInput() {
   return false;
 }
 
+export function focusOutActiveElement() {
+  const activeElement = <HTMLElement>document.activeElement;
+  activeElement && activeElement.blur && activeElement.blur();
+}
+
 const skipInputAttrsReg = /^(value|checked|disabled|type|class|style|id|autofocus|autocomplete|autocorrect)$/i;
 export function copyInputAttributes(srcElement: HTMLElement, destElement: HTMLElement) {
   // copy attributes from one element to another

src/util/form.ts

@@ -24,11 +24,6 @@ export class Form {
     }
   }
 
-  focusOut() {
-    const activeElement = <HTMLElement>document.activeElement;
-    activeElement && activeElement.blur && activeElement.blur();
-  }
-
   setAsFocused(input: any) {
     this._focused = input;
   }

src/util/keyboard.ts

@@ -1,8 +1,7 @@
 import { Injectable, NgZone } from '@angular/core';
 
 import { Config } from '../config/config';
-import { Form } from './form';
-import { hasFocusedTextInput, nativeRaf, nativeTimeout, zoneRafFrames } from './dom';
+import { focusOutActiveElement, hasFocusedTextInput, nativeRaf, nativeTimeout, zoneRafFrames } from './dom';
 import { Key } from './key';
 
 
@@ -24,7 +23,7 @@ import { Key } from './key';
 @Injectable()
 export class Keyboard {
 
-  constructor(config: Config, private _form: Form, private _zone: NgZone) {
+  constructor(config: Config, private _zone: NgZone) {
     _zone.runOutsideAngular(() => {
       this.focusOutline(config.get('focusOutline'), document);
 
@@ -33,7 +32,7 @@ export class Keyboard {
         // useful when the virtual keyboard is closed natively
         // https://github.com/driftyco/ionic-plugin-keyboard
         if (hasFocusedTextInput()) {
-          this._form.focusOut();
+          focusOutActiveElement();
         }
       });
     });
@@ -117,7 +116,7 @@ export class Keyboard {
     nativeRaf(() => {
       if (hasFocusedTextInput()) {
         // only focus out when a text input has focus
-        this._form.focusOut();
+        focusOutActiveElement();
       }
     });
   }

src/util/mock-providers.ts

@@ -6,7 +6,6 @@ import { App } from '../components/app/app';
 import { IonicApp } from '../components/app/app-root';
 import { Config } from '../config/config';
 import { DeepLinker } from '../navigation/deep-linker';
-import { Form } from './form';
 import { GestureController } from '../gestures/gesture-controller';
 import { Keyboard } from './keyboard';
 import { Menu } from '../components/menu/menu';
@@ -231,11 +230,9 @@ export const mockNavController = function(): NavControllerBase {
 
   let app = mockApp(config, platform);
 
-  let form = new Form();
-
   let zone = mockZone();
 
-  let keyboard = new Keyboard(config, form, zone);
+  let keyboard = new Keyboard(config, zone);
 
   let elementRef = mockElementRef();
 
@@ -281,11 +278,9 @@ export const mockNavController = function(): NavControllerBase {
 };
 
 export const mockOverlayPortal = function(app: App, config: Config, platform: Platform): OverlayPortal {
-  let form = new Form();
-
   let zone = mockZone();
 
-  let keyboard = new Keyboard(config, form, zone);
+  let keyboard = new Keyboard(config, zone);
 
   let elementRef = mockElementRef();
 
@@ -323,11 +318,9 @@ export const mockTab = function(parentTabs: Tabs): Tab {
 
   let app = (<any>parentTabs)._app || mockApp(config, platform);
 
-  let form = new Form();
-
   let zone = mockZone();
 
-  let keyboard = new Keyboard(config, form, zone);
+  let keyboard = new Keyboard(config, zone);
 
   let elementRef = mockElementRef();