part 2

src/components/app/app.ts

@@ -30,6 +30,7 @@ export class App {
   private _titleSrv: Title = new Title(DOCUMENT);
   private _rootNav: NavController = null;
   private _disableScrollAssist: boolean;
+  private _didScroll = false;
 
   /**
    * @hidden
@@ -87,6 +88,11 @@ export class App {
     _plt.registerBackButtonAction(this.goBack.bind(this));
     this._disableScrollAssist = _config.getBoolean('disableScrollAssist', false);
 
+    const blurring = _config.getBoolean('inputBlurring', false);
+    if (blurring) {
+      this._enableInputBlurring();
+    }
+
     runInDev(() => {
       // During developement, navPop can be triggered by calling
       const win = <any>_plt.win();
@@ -179,6 +185,7 @@ export class App {
    */
   setScrolling() {
     this._scrollTime = Date.now() + ACTIVE_SCROLLING_TIME;
+    this._didScroll = true;
   }
 
   /**
@@ -289,6 +296,49 @@ export class App {
     return recursivePop(this.getActiveNav());
   }
 
+  /**
+   * @hidden
+   */
+  _enableInputBlurring() {
+    let focused = true;
+    const self = this;
+    const platform = this._plt;
+
+    platform.registerListener(platform.doc(), 'focusin', onFocusin, { capture: true, zone: false, passive: true });
+    platform.registerListener(platform.doc(), 'touchend', onTouchend, { capture: false, zone: false, passive: true });
+
+    function onFocusin(ev: any) {
+      focused = true;
+    }
+    function onTouchend(ev: any) {
+      // if app did scroll return early
+      if (self._didScroll) {
+        self._didScroll = false;
+        return;
+      }
+      const active = <HTMLElement> self._plt.getActiveElement();
+      if (!active) {
+        return;
+      }
+      // only blur if the active element is a text-input or a textarea
+      const tag = active.tagName;
+      if (tag !== 'INPUT' && tag !== 'TEXTAREA') {
+        return;
+      }
+      // if the selected target is the active element, do not blur
+      if (ev.target === active) {
+        return;
+      }
+      focused = false;
+      // TODO: find a better way, why 50ms?
+      platform.timeout(() => {
+        if (!focused) {
+          active.blur();
+        }
+      }, 50);
+    }
+  }
+
 }
 
 function recursivePop(nav: any): Promise<any> {

src/components/datetime/datetime.ts

@@ -259,6 +259,7 @@ import { dateValueRange, renderDateTime, renderTextFormat, convertDataToISO, con
             'ion-button="item-cover" ' +
             '[attr.aria-labelledby]="_labelId" ' +
             '[attr.aria-disabled]="_disabled" ' +
+            '(click)="_click($event)" ' +
             'class="item-cover">' +
     '</button>',
   host: {
@@ -448,6 +449,7 @@ export class DateTime extends BaseInput<DateTimeData> implements AfterContentIni
    * @hidden
    */
   _inputUpdated() {
+    super._inputUpdated();
     this.updateText();
   }
 
@@ -473,12 +475,7 @@ export class DateTime extends BaseInput<DateTimeData> implements AfterContentIni
     return convertDataToISO(this.value);
   }
 
-  @HostListener('click', ['$event'])
   _click(ev: UIEvent) {
-    // do not continue if the click event came from a form submit
-    if (ev.detail === 0) {
-      return;
-    }
     ev.preventDefault();
     ev.stopPropagation();
     this.open();

src/components/input/input.scss

@@ -75,38 +75,6 @@ input.text-input:-webkit-autofill {
   resize: none;
 }
 
-
-// Input Cover: Unfocused
-// --------------------------------------------------
-// The input cover is the div that actually receives the
-// tap/click event when scroll assist is configured to true.
-// This make it so the native input element is not clickable.
-// This will only show when the scroll assist is configured
-// otherwise the .input-cover will not be rendered at all
-// The input cover is not clickable when the input is disabled
-
-.input-cover {
-  position: absolute;
-  top: 0;
-  left: 0;
-
-  width: 100%;
-  height: 100%;
-}
-
-.input[disabled] .input-cover {
-  pointer-events: none;
-}
-
-
-// Input Cover: Focused
-// --------------------------------------------------
-// When the input has focus, then the input cover should be hidden
-
-.input-has-focus .input-cover {
-  display: none;
-}
-
 .input-has-focus {
   pointer-events: none;
 }
@@ -118,7 +86,6 @@ input.text-input:-webkit-autofill {
   pointer-events: auto;
 }
 
-
 // Scroll Assist Input
 // --------------------------------------------------
 // This input is used to help the app handle