fix(input): keyboard focus/scrolling/tabbing

ionic/util/keyboard.ts

@@ -1,5 +1,6 @@
-import {Injectable} from 'angular2/angular2';
+import {Injectable, NgZone} from 'angular2/angular2';
 
+import {IonicConfig} from '../config/config';
 import {IonicForm} from './form';
 import * as dom from './dom';
 
@@ -7,8 +8,13 @@ import * as dom from './dom';
 @Injectable()
 export class IonicKeyboard {
 
-  constructor(form: IonicForm) {
+  constructor(config: IonicConfig, form: IonicForm, zone: NgZone) {
     this.form = form;
+    this.zone = zone;
+
+    zone.runOutsideAngular(() => {
+      this.focusOutline(config.get('focusOutline'), document);
+    });
   }
 
   isOpen() {
@@ -25,16 +31,23 @@ export class IonicKeyboard {
       promise = new Promise(resolve => { callback = resolve; });
     }
 
-    function checkKeyboard() {
-      if (!self.isOpen()) {
-        callback();
+    self.zone.runOutsideAngular(() => {
 
-      } else {
-        setTimeout(checkKeyboard, 500);
+      function checkKeyboard() {
+        if (!self.isOpen()) {
+          self.zone.run(() => {
+            console.debug('keyboard closed');
+            callback();
+          });
+
+        } else {
+          setTimeout(checkKeyboard, KEYBOARD_CLOSE_POLLING);
+        }
       }
-    }
 
-    setTimeout(checkKeyboard, 100);
+      setTimeout(checkKeyboard, KEYBOARD_CLOSE_POLLING);
+
+    });
 
     return promise;
   }
@@ -48,4 +61,64 @@ export class IonicKeyboard {
     });
   }
 
+  focusOutline(setting, document) {
+    /* Focus Outline
+     * --------------------------------------------------
+     * By default, when a keydown event happens from a tab key, then
+     * the 'focus-outline' css class is added to the body element
+     * so focusable elements have an outline. On a mousedown or
+     * touchstart event, then the 'focus-outline' css class is removed.
+     *
+     * Config default overrides:
+     * focusOutline: true     - Always add the focus-outline
+     * focusOutline: false    - Do not add the focus-outline
+     */
+
+
+    let isKeyInputEnabled = false;
+
+    function cssClass() {
+      dom.raf(() => {
+        document.body.classList[isKeyInputEnabled ? 'add' : 'remove']('focus-outline');
+      });
+    }
+
+    if (setting === true) {
+      isKeyInputEnabled = true;
+      return cssClass();
+
+    } else if (setting === false) {
+      return;
+    }
+
+    // default is to add the focus-outline when the tab key is used
+    function keyDown(ev) {
+      if (!isKeyInputEnabled && ev.keyCode == 9) {
+        isKeyInputEnabled = true;
+        enableKeyInput();
+      }
+    }
+
+    function pointerDown() {
+      isKeyInputEnabled = false;
+      enableKeyInput();
+    }
+
+    function enableKeyInput() {
+      cssClass();
+
+      document.removeEventListener('mousedown', pointerDown);
+      document.removeEventListener('touchstart', pointerDown);
+
+      if (isKeyInputEnabled) {
+        document.addEventListener('mousedown', pointerDown);
+        document.addEventListener('touchstart', pointerDown);
+      }
+    }
+
+    document.addEventListener('keydown', keyDown);
+  }
+
 }
+
+const KEYBOARD_CLOSE_POLLING = 150;