fix(keyboard): big keyboard/input refactor

fixes #9699 fixes #11484 fixes #11389 fixes #11325 fixes #11291 fixes #10828 fixes #11291 fixes #10393 fixes #10257 fixes #9434 fixes #8933 fixes #7178 fixes #7047 fixes #10552 fixes #10393 fixes #10183 fixes #10187 fixes #10852 fixes #11578
ionic-team · Jun 12, 2017 · c10f72b · c10f72b
1 parent 47e3c70
commit c10f72b
Show file tree

Hide file tree

Showing 27 changed files with 847 additions and 957 deletions.
diff --git a/scripts/gulp/tasks/demos.dev.ts b/scripts/gulp/tasks/demos.dev.ts
@@ -11,14 +11,14 @@ task('demos.watch', ['demos.prepare'], (done: Function) => {
     done(new Error(`Usage: gulp e2e.watch --folder modal`));
   }
 
-  serveDemo(folderInfo.componentName).then(() => {
+  serveDemo(folderInfo.componentName, folderInfo.devApp).then(() => {
     done();
   }).catch((err: Error) => {
     done(err);
   });
 });
 
-function serveDemo(folderName: any) {
+function serveDemo(folderName: any, devApp: boolean) {
 
   const ionicAngularDir = join(PROJECT_ROOT, 'src');
   const srcTestRoot = join(DEMOS_ROOT, 'src', folderName);
@@ -40,5 +40,5 @@ function serveDemo(folderName: any) {
   const appNgModulePath = join(srcTestRoot, 'app', 'app.module.ts');
   const distDir = join(distDemoRoot, 'www');
 
-  return runAppScriptsServe(folderName, appEntryPoint, appNgModulePath, ionicAngularDir, distDir, pathToWriteFile, ionicAngularDir, sassConfigPath, copyConfigPath, watchConfigPath);
+  return runAppScriptsServe(folderName, appEntryPoint, appNgModulePath, ionicAngularDir, distDir, pathToWriteFile, ionicAngularDir, sassConfigPath, copyConfigPath, watchConfigPath, devApp);
 }
diff --git a/scripts/gulp/tasks/e2e.dev.ts b/scripts/gulp/tasks/e2e.dev.ts
@@ -13,14 +13,14 @@ task('e2e.watch', ['e2e.prepare'], (done: Function) => {
     return;
   }
 
-  serveTest(folderInfo).then(() => {
+  serveTest(folderInfo, folderInfo.devApp).then(() => {
     done();
   }).catch((err: Error) => {
     done(err);
   });
 });
 
-function serveTest(folderInfo: any) {
+function serveTest(folderInfo: any, devApp: boolean) {
 
   const ionicAngularDir = join(PROJECT_ROOT, 'src');
   const srcTestRoot = join(PROJECT_ROOT, 'src', 'components', folderInfo.componentName, 'test', folderInfo.componentTest);
@@ -47,5 +47,5 @@ function serveTest(folderInfo: any) {
   const appNgModulePath = join(dirname(appEntryPoint), 'app.module.ts');
   const distDir = join(distTestRoot, 'www');
 
-  return runAppScriptsServe(join(folderInfo.componentName, folderInfo.componentTest), appEntryPoint, appNgModulePath, ionicAngularDir, distDir, pathToWriteFile, ionicAngularDir, sassConfigPath, copyConfigPath, null);
+  return runAppScriptsServe(join(folderInfo.componentName, folderInfo.componentTest), appEntryPoint, appNgModulePath, ionicAngularDir, distDir, pathToWriteFile, ionicAngularDir, sassConfigPath, copyConfigPath, null, devApp);
 }
diff --git a/scripts/gulp/util.ts b/scripts/gulp/util.ts
@@ -190,7 +190,7 @@ export function runWebpack(pathToWebpackConfig: string, done: Function) {
   });
 }
 
-export function runAppScriptsServe(testOrDemoName: string, appEntryPoint: string, appNgModulePath: string, srcDir: string, distDir: string, tsConfig: string, ionicAngularDir: string, sassConfigPath: string, copyConfigPath: string, watchConfigPath: string) {
+export function runAppScriptsServe(testOrDemoName: string, appEntryPoint: string, appNgModulePath: string, srcDir: string, distDir: string, tsConfig: string, ionicAngularDir: string, sassConfigPath: string, copyConfigPath: string, watchConfigPath: string, devApp: boolean) {
   console.log('Running ionic-app-scripts serve with', testOrDemoName);
   const deepLinksDir = dirname(dirname(appNgModulePath));
   let scriptArgs = [
@@ -207,6 +207,9 @@ export function runAppScriptsServe(testOrDemoName: string, appEntryPoint: string
     '--copy', copyConfigPath,
     '--enableLint', 'false'
   ];
+  if (devApp) {
+    scriptArgs.push('--bonjour');
+  }
 
   if (watchConfigPath) {
     scriptArgs.push('--watch');
@@ -349,9 +352,11 @@ export function getFolderInfo() {
     componentName = folderSplit[0];
     componentTest = (folderSplit.length > 1 ? folderSplit[1] : 'basic');
   }
+  const devApp = argv.devapp !== undefined;
   return {
     componentName: componentName,
-    componentTest: componentTest
+    componentTest: componentTest,
+    devApp: devApp
   };
 }
 

diff --git a/src/components/alert/alert-component.ts b/src/components/alert/alert-component.ts
@@ -84,6 +84,7 @@ export class AlertCmp {
   msgId: string;
   subHdrId: string;
   mode: string;
+  keyboardResizes: boolean;
   gestureBlocker: BlockerDelegate;
 
   constructor(
@@ -99,6 +100,7 @@ export class AlertCmp {
     this.gestureBlocker = gestureCtrl.createBlocker(BLOCK_ALL);
     this.d = params.data;
     this.mode = this.d.mode || config.get('mode');
+    this.keyboardResizes = config.getBoolean('keyboardResizes', false);
     _renderer.setElementClass(_elementRef.nativeElement, `alert-${this.mode}`, true);
 
     if (this.d.cssClass) {
@@ -178,7 +180,7 @@ export class AlertCmp {
     }
 
     const hasTextInput = (this.d.inputs.length && this.d.inputs.some(i => !(NON_TEXT_INPUT_REGEX.test(i.type))));
-    if (hasTextInput && this._plt.is('mobile')) {
+    if (!this.keyboardResizes && hasTextInput && this._plt.is('mobile')) {
       // this alert has a text input and it's on a mobile device so we should align
       // the alert up high because we need to leave space for the virtual keboard
       // this also helps prevent the layout getting all messed up from

diff --git a/src/components/app/app.ts b/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,60 @@ 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
+      if (SKIP_BLURRING.indexOf(active.tagName) === -1) {
+        return;
+      }
+
+      // if the selected target is the active element, do not blur
+      const tapped = ev.target;
+      if (tapped === active) {
+        return;
+      }
+      if (SKIP_BLURRING.indexOf(tapped.tagName) >= 0) {
+        return;
+      }
+
+      // skip if div is a cover
+      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> {
@@ -322,5 +383,6 @@ function findTopNav(nav: NavController) {
   return nav;
 }
 
+const SKIP_BLURRING = ['INPUT', 'TEXTAREA', 'ION-INPUT', 'ION-TEXTAREA'];
 const ACTIVE_SCROLLING_TIME = 100;
 const CLICK_BLOCK_BUFFER_IN_MILLIS = 64;
diff --git a/src/components/checkbox/checkbox.ts b/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);
   }
 
 }
diff --git a/src/components/datetime/datetime.ts b/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();

diff --git a/src/components/input/input.scss b/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
 // --------------------------------------------------