feat(focusOut): ability to blur focused element, close keyboard

ionic/components/form/form.scss

@@ -66,27 +66,33 @@ select[readonly] {
 // Focus Utils
 // -------------------------------
 
-focus-holder input {
+focus-ctrl {
   position: fixed;
-  top: 1px;
+
-  width: 9px;
+  input,
-  left: -9999px;
+  button {
-  z-index: 9999;
+    position: fixed;
+    top: 1px;
+    width: 9px;
+    left: -9999px;
+    z-index: 9999;
+  }
 }
 
-/*focus-holder input[tabindex="999"] {
+
+/*focus-ctrl input[tabindex="999"] {
   left: 0px;
 }
 
-focus-holder input[tabindex="1001"] {
+focus-ctrl input[tabindex="1001"] {
   left: 20px;
 }
 
-focus-holder input[tabindex="1002"] {
+focus-ctrl input[tabindex="1002"] {
   left: auto;
   right: 10px;
 }
 
-focus-holder input:focus {
+focus-ctrl input:focus {
   background: red;
 }*/

ionic/components/form/form.ts

@@ -28,9 +28,7 @@ export class IonicForm {
     this._focused = null;
 
     zone.runOutsideAngular(() => {
-      if (this._config.get('keyboardScrollAssist')) {
+      this.initHolders(document, this._config.get('keyboardScrollAssist'));
-        this.initHolders(document);
-      }
 
       if (this._config.get('keyboardInputListener') !== false) {
         this.initKeyInput(document);
@@ -78,55 +76,72 @@ export class IonicForm {
     document.addEventListener('keydown', keyDown);
   }
 
-  initHolders(document) {
+  initHolders(document, scrollAssist) {
     // raw DOM fun
-    this._holder = document.createElement('focus-holder');
+    this._ctrl = document.createElement('focus-ctrl');
+    this._ctrl.setAttribute('aria-hidden', true);
 
-    this._prev = document.createElement('input');
+    if (scrollAssist) {
-    this._prev.tabIndex = NO_FOCUS_TAB_INDEX;
+      this._prev = document.createElement('input');
-    this._holder.appendChild(this._prev);
+      this._prev.tabIndex = NO_FOCUS_TAB_INDEX;
+      this._ctrl.appendChild(this._prev);
 
-    this._next = document.createElement('input');
+      this._next = document.createElement('input');
-    this._next.tabIndex = NO_FOCUS_TAB_INDEX;
+      this._next.tabIndex = NO_FOCUS_TAB_INDEX;
-    this._holder.appendChild(this._next);
+      this._ctrl.appendChild(this._next);
 
-    this._temp = document.createElement('input');
+      this._temp = document.createElement('input');
-    this._temp.tabIndex = NO_FOCUS_TAB_INDEX;
+      this._temp.tabIndex = NO_FOCUS_TAB_INDEX;
-    this._holder.appendChild(this._temp);
+      this._ctrl.appendChild(this._temp);
+    }
 
-    document.body.appendChild(this._holder);
+    this._blur = document.createElement('button');
+    this._blur.tabIndex = NO_FOCUS_TAB_INDEX;
+    this._ctrl.appendChild(this._blur);
+
+    document.body.appendChild(this._ctrl);
 
     function preventDefault(ev) {
       ev.preventDefault();
       ev.stopPropagation();
     }
 
-    this._prev.addEventListener('keydown', preventDefault);
+    if (scrollAssist) {
-    this._next.addEventListener('keydown', preventDefault);
+      this._prev.addEventListener('keydown', preventDefault);
-    this._temp.addEventListener('keydown', preventDefault);
+      this._next.addEventListener('keydown', preventDefault);
+      this._temp.addEventListener('keydown', preventDefault);
 
-    this._prev.addEventListener('focus', () => {
+      this._prev.addEventListener('focus', () => {
-      this.focusPrevious();
+        this.focusPrevious();
-    });
+      });
 
-    this._next.addEventListener('focus', () => {
+      this._next.addEventListener('focus', () => {
-      this.focusNext();
+        this.focusNext();
-    });
+      });
 
-    let self = this;
+      let self = this;
-    let resetTimer;
+      let resetTimer;
-    function queueReset() {
+      function queueReset() {
-      clearTimeout(resetTimer);
+        clearTimeout(resetTimer);
 
-      resetTimer = setTimeout(function() {
+        resetTimer = setTimeout(function() {
-        self._zone.run(() => {
+          self._zone.run(() => {
-          self.resetInputs();
+            self.resetInputs();
-        });
+          });
-      }, 100);
+        }, 100);
+      }
+
+      document.addEventListener('focusin', queueReset);
+      document.addEventListener('focusout', queueReset);
     }
 
-    document.addEventListener('focusin', queueReset);
+  }
-    document.addEventListener('focusout', queueReset);
+
+  focusOut() {
+    console.debug('focusOut')
+    this._blur.tabIndex = NORMAL_FOCUS_TAB_INDEX;
+    this._blur.focus();
+    this._blur.tabIndex = NO_FOCUS_TAB_INDEX;
   }
 
   setFocusHolder(type) {
@@ -216,8 +231,7 @@ export class IonicForm {
       if (index > -1 && (index + inc) < this._inputs.length) {
         let siblingInput = this._inputs[index + inc];
         if (siblingInput) {
-          siblingInput.initFocus();
+          return siblingInput.initFocus();
-          return;
         }
       }
       this._focused.initFocus();
@@ -232,4 +246,3 @@ const PREV_TAB_INDEX = 999;
 const ACTIVE_FOCUS_TAB_INDEX = 1000;
 const NEXT_TAB_INDEX = 1001;
 const TEMP_TAB_INDEX = 2000;
-

ionic/components/text-input/text-input.ts

@@ -322,8 +322,6 @@ export class TextInput {
 
       // ensure the body hasn't scrolled down
       document.body.scrollTop = 0;
-
-      this.form.resetInputs();
     });
 
     if (this.scrollAssist && this.scrollView) {