fix(keyboard): big keyboard/input refactor

Author: manucorporat

scripts/gulp/util.ts

@@ -205,7 +205,8 @@ export function runAppScriptsServe(testOrDemoName: string, appEntryPoint: string
     '--ionicAngularDir', ionicAngularDir,
     '--sass', sassConfigPath,
     '--copy', copyConfigPath,
-    '--enableLint', 'false'
+    '--enableLint', 'false',
+    '--bonjour'
   ];
 
   if (watchConfigPath) {

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,54 @@ export class App {
     return recursivePop(this.getActiveNav());
   }
 
+  /**
+   * @hidden
+   */
+  _enableInputBlurring() {
+    console.debug('App: _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;
+      }
+      const tapped = ev.target;
+      // if the selected target is the active element, do not blur
+      if (tapped === active) {
+        return;
+      }
+      if (tapped.classList.contains('input-cover')) {
+        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/checkbox/checkbox.ts

@@ -118,13 +118,6 @@ export class Checkbox extends BaseInput<boolean> implements IonicTapInput, OnDes
     super(config, elementRef, renderer, 'checkbox', false, form, item, null);
   }
 
-  /**
-   * @hidden
-   */
-  initFocus() {
-    this._elementRef.nativeElement.querySelector('button').focus();
-  }
-
   /**
    * @hidden
    */
@@ -145,8 +138,8 @@ export class Checkbox extends BaseInput<boolean> implements IonicTapInput, OnDes
   /**
    * @hidden
    */
-  _inputCheckHasValue(val: boolean) {
-    this._item && this._item.setElementClass('item-checkbox-checked', val);
+  _inputUpdated() {
+    this._item && this._item.setElementClass('item-checkbox-checked', this._value);
   }
 
 }

src/components/datetime/datetime.ts

@@ -448,6 +448,7 @@ export class DateTime extends BaseInput<DateTimeData> implements AfterContentIni
    * @hidden
    */
   _inputUpdated() {
+    super._inputUpdated();
     this.updateText();
   }
 
@@ -475,10 +476,6 @@ export class DateTime extends BaseInput<DateTimeData> implements AfterContentIni
 
   @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.ios.scss

@@ -56,7 +56,7 @@ $text-input-ios-highlight-color-invalid:   $text-input-highlight-color-invalid !
 // iOS Default Input
 // --------------------------------------------------
 
-.text-input-ios {
+.input-ios .text-input {
   @include margin($text-input-ios-margin-top, $text-input-ios-margin-end, $text-input-ios-margin-bottom, $text-input-ios-margin-start);
   @include padding(0);
 

src/components/input/input.md.scss

@@ -56,7 +56,7 @@ $text-input-md-highlight-color-invalid:     $text-input-highlight-color-invalid
 // Material Design Default Input
 // --------------------------------------------------
 
-.text-input-md {
+.input-md .text-input {
   @include margin($text-input-md-margin-top, $text-input-md-margin-end, $text-input-md-margin-bottom, $text-input-md-margin-start);
   @include padding(0);
 

src/components/input/input.scss

@@ -93,6 +93,8 @@ input.text-input:-webkit-autofill {
 
   width: 100%;
   height: 100%;
+
+  touch-action: manipulation;
 }
 
 .input[disabled] .input-cover {
@@ -127,27 +129,6 @@ input.text-input:-webkit-autofill {
 }
 
 
-// Scroll Assist Input
-// --------------------------------------------------
-// This input is used to help the app handle
-// Next and Previous input tabbing
-
-[next-input] {
-  @include padding(0);
-
-  position: absolute;
-  bottom: 20px;
-
-  width: 1px;
-  height: 1px;
-
-  border: 0;
-  background: transparent;
-
-  pointer-events: none;
-}
-
-
 // Clear Input Icon
 // --------------------------------------------------