feat(input): default autocomplete/autocorrect=off, fix autofocus

Related: #5480

ionic/components/input/input-base.ts

@@ -24,6 +24,9 @@ export class InputBase {
   protected _useAssist: boolean = true;
   protected _value = '';
   protected _isTouch: boolean;
+  protected _autoFocusAssist: string;
+  protected _autoComplete: string;
+  protected _autoCorrect: string;
 
   inputControl: NgControl;
 
@@ -45,6 +48,10 @@ export class InputBase {
     this._useAssist = config.get('scrollAssist');
     this._keyboardHeight = config.get('keyboardHeight');
 
+    this._autoFocusAssist = config.get('autoFocusAssist', 'delay');
+    this._autoComplete = config.get('autocomplete', 'off');
+    this._autoCorrect = config.get('autocorrect', 'off');
+
     if (ngControl) {
       ngControl.valueAccessor = this;
     }
@@ -176,8 +183,44 @@ export class InputBase {
     this.checkHasValue(nativeInput.getValue());
     this.disabled = this._disabled;
 
+    var ionInputEle: HTMLElement = this._elementRef.nativeElement;
+    let nativeInputEle: HTMLElement = nativeInput.element();
+
     // copy ion-input attributes to the native input element
-    copyInputAttributes(this._elementRef.nativeElement, nativeInput.element());
+    copyInputAttributes(ionInputEle, nativeInputEle);
+
+    if (ionInputEle.hasAttribute('autofocus')) {
+      // the ion-input element has the autofocus attributes
+      ionInputEle.removeAttribute('autofocus');
+
+      if (this._autoFocusAssist === 'immediate') {
+        // config says to immediate focus on the input
+        // works best on android devices
+        nativeInputEle.focus();
+
+      } else if (this._autoFocusAssist === 'delay') {
+        // config says to chill out a bit and focus on the input after transitions
+        // works best on desktop
+        setTimeout(() => {
+          nativeInputEle.focus();
+        }, 650);
+      }
+
+      // traditionally iOS has big issues with autofocus on actual devices
+      // autoFocus is disabled by default with the iOS mode config
+    }
+
+    // by default set autocomplete="off" unless specified by the input
+    if (ionInputEle.hasAttribute('autocomplete')) {
+      this._autoComplete = ionInputEle.getAttribute('autocomplete');
+    }
+    nativeInputEle.setAttribute('autocomplete', this._autoComplete);
+
+    // by default set autocomplete="off" unless specified by the input
+    if (ionInputEle.hasAttribute('autocorrect')) {
+      this._autoCorrect = ionInputEle.getAttribute('autocorrect');
+    }
+    nativeInputEle.setAttribute('autocorrect', this._autoCorrect);
   }
 
   /**

ionic/components/modal/test/basic/index.ts

@@ -6,9 +6,9 @@ import {Modal, ActionSheet, NavController, NavParams, Transition, TransitionOpti
   templateUrl: 'main.html'
 })
 class E2EPage {
+  platforms;
 
-  constructor(nav: NavController, config: Config, platform: Platform) {
-    this.nav = nav;
+  constructor(private nav: NavController, config: Config, platform: Platform) {
     console.log('platforms', platform.platforms());
     console.log('mode', config.get('mode'));
 
@@ -55,6 +55,14 @@ class E2EPage {
     });
   }
 
+  presentModalWithInputs() {
+	  let modal = Modal.create(ModalWithInputs);
+    modal.onDismiss((data) => {
+      console.log('Modal with inputs data:', data);
+    });
+    this.nav.present(modal);
+  }
+
   presentModalCustomAnimation() {
     let modal = Modal.create(ContactUs);
     this.nav.present(modal, {
@@ -85,12 +93,13 @@ class E2EPage {
   `
 })
 class ModalPassData {
-  constructor(params: NavParams, viewCtrl: ViewController) {
+  data;
+
+  constructor(params: NavParams, private viewCtrl: ViewController) {
     this.data = {
       userId: params.get('userId'),
       name: 'Jenny'
     };
-    this.viewCtrl = viewCtrl;
   }
 
   submit() {
@@ -118,9 +127,7 @@ class ModalPassData {
 })
 class ToolbarModal {
 
-  constructor(viewCtrl: ViewController) {
-    this.viewCtrl = viewCtrl;
-  }
+  constructor(private viewCtrl: ViewController) {}
 
   dismiss() {
     this.viewCtrl.emit({
@@ -133,12 +140,66 @@ class ToolbarModal {
 
 
 @Page({
-  template: '<ion-nav [root]="rootView"></ion-nav>'
+  template: `
+    <ion-toolbar secondary>
+      <ion-buttons start>
+        <button (click)="dismiss()">Close</button>
+      </ion-buttons>
+      <ion-title>Modal w/ Inputs</ion-title>
+    </ion-toolbar>
+    <ion-content>
+      <form #addForm="ngForm" (submit)="save($event)" novalidate>
+        <ion-list>
+          <ion-item>
+            <ion-label floating>Title <span [hidden]="title.valid">(Required)</span></ion-label>
+            <ion-input ngControl="title" type="text" [(ngModel)]="data.title" #title="ngForm" required autofocus></ion-input>
+          </ion-item>
+          <ion-item>
+            <ion-label floating>Note <span [hidden]="note.valid">(Required)</span></ion-label>
+            <ion-input ngControl="note" type="text" [(ngModel)]="data.note" #note="ngForm" required></ion-input>
+          </ion-item>
+          <ion-item>
+            <ion-label floating>Icon</ion-label>
+            <ion-input ngControl="icon" type="text" [(ngModel)]="data.icon" #icon="ngForm" autocomplete="on" autocorrect="on"></ion-input>
+          </ion-item>
+        </ion-list>
+        <div padding>
+          <button block large type="submit" [disabled]="!addForm.valid">Save</button>
+        </div>
+      </form>
+    </ion-content>
+  `
+})
+class ModalWithInputs {
+  data;
+
+  constructor(private viewCtrl: ViewController) {
+    this.data = {
+      title: 'Title',
+      note: 'Note',
+      icon: 'home'
+    };
+  }
+
+  public save(ev) {
+    this.viewCtrl.dismiss(this.data);
+  }
+
+  public dismiss() {
+    this.viewCtrl.dismiss(null);
+  }
+}
+
+
+@Page({
+  template: '<ion-nav [root]="root"></ion-nav>'
 })
 class ContactUs {
+  root;
+
   constructor() {
     console.log('ContactUs constructor');
-    this.rootView = ModalFirstPage;
+    this.root = ModalFirstPage;
   }
   onPageLoaded() {
     console.log('ContactUs onPageLoaded');
@@ -185,9 +246,7 @@ class ContactUs {
   `
 })
 class ModalFirstPage {
-  constructor(nav: NavController) {
-    this.nav = nav;
-  }
+  constructor(private nav: NavController) {}
 
   push() {
     let page = ModalSecondPage;
@@ -265,10 +324,9 @@ class ModalFirstPage {
 })
 class ModalSecondPage {
   constructor(
-    nav: NavController,
+    private nav: NavController,
     params: NavParams
   ) {
-    this.nav = nav;
     console.log('Second page params:', params);
   }
 }
@@ -278,6 +336,8 @@ class ModalSecondPage {
   template: '<ion-nav [root]="root"></ion-nav>'
 })
 class E2EApp {
+  root;
+
   constructor() {
     this.root = E2EPage;
   }

ionic/components/modal/test/basic/main.html

@@ -13,6 +13,9 @@
   <p>
     <button class="e2eOpenToolbarModal" (click)="presentToolbarModal()">Present modal w/ toolbar</button>
   </p>
+  <p>
+    <button (click)="presentModalWithInputs()">Present modal w/ inputs</button>
+  </p>
   <p>
     <button (click)="presentModalCustomAnimation()">Modal: Custom Animation</button>
   </p>

ionic/config/config.ts

@@ -117,88 +117,16 @@ export class Config {
     this._s = config && isObject(config) && !isArray(config) ? config : {};
   }
 
- /**
-  * For setting and getting multiple config values
-  */
 
-/**
- * @private
- * @name settings()
- * @description
- */
-  settings() {
-    const args = arguments;
-
-    switch (args.length) {
-
-      case 0:
-        return this._s;
-
-      case 1:
-        // settings({...})
-        this._s = args[0];
-        this._c = {}; // clear cache
-        break;
-
-      case 2:
-        // settings('ios', {...})
-        this._s.platforms = this._s.platforms || {};
-        this._s.platforms[args[0]] = args[1];
-        this._c = {}; // clear cache
-        break;
-    }
-
-    return this;
-  }
-
-
-/**
- * @name set
- * @description
- * Sets a single config value.
- *
- * @param {string} [platform] - The platform (either 'ios' or 'android') that the config value should apply to. Leaving this blank will apply the config value to all platforms.
- * @param {string} [key] - The key used to look up the value at a later point in time.
- * @param {string} [value] - The config value being stored.
- */
-  set() {
-    const args = arguments;
-    const arg0 = args[0];
-    const arg1 = args[1];
-
-    switch (args.length) {
-      case 2:
-        // set('key', 'value') = set key/value pair
-        // arg1 = value
-        this._s[arg0] = arg1;
-        delete this._c[arg0]; // clear cache
-        break;
-
-      case 3:
-        // setting('ios', 'key', 'value') = set key/value pair for platform
-        // arg0 = platform
-        // arg1 = key
-        // arg2 = value
-        this._s.platforms = this._s.platforms || {};
-        this._s.platforms[arg0] = this._s.platforms[arg0] || {};
-        this._s.platforms[arg0][arg1] = args[2];
-        delete this._c[arg1]; // clear cache
-        break;
-
-    }
-
-    return this;
-  }
-
-
-/**
- * @name get
- * @description
- * Returns a single config value, given a key.
- *
- * @param {string} [key] - the key for the config value
- */
-  get(key: string): any {
+  /**
+   * @name get
+   * @description
+   * Returns a single config value, given a key.
+   *
+   * @param {string} [key] - the key for the config value
+   * @param {any} [fallbackValue] - a fallback value to use when the config value was not found, or is config value is `null`. Fallback value defaults to `null`.
+   */
+  get(key: string, fallbackValue: any = null): any {
 
     if (!isDefined(this._c[key])) {
       if (!isDefined(key)) {
@@ -289,13 +217,18 @@ export class Config {
     // or it was from the users platform configs
     // or it was from the default platform configs
     // in that order
+    let rtnVal;
     if (isFunction(this._c[key])) {
-      return this._c[key](this.platform);
+      rtnVal = this._c[key](this.platform);
+
+    } else {
+      rtnVal = this._c[key];
     }
 
-    return this._c[key];
+    return (rtnVal !== null ? rtnVal : fallbackValue);
   }
 
+
   /**
    * @name getBoolean
    * @description
@@ -308,6 +241,75 @@ export class Config {
     return (val || val === 'true') ? true : false;
   }
 
+
+  /**
+   * @name set
+   * @description
+   * Sets a single config value.
+   *
+   * @param {string} [platform] - The platform (either 'ios' or 'android') that the config value should apply to. Leaving this blank will apply the config value to all platforms.
+   * @param {string} [key] - The key used to look up the value at a later point in time.
+   * @param {string} [value] - The config value being stored.
+   */
+  set() {
+    const args = arguments;
+    const arg0 = args[0];
+    const arg1 = args[1];
+
+    switch (args.length) {
+      case 2:
+        // set('key', 'value') = set key/value pair
+        // arg1 = value
+        this._s[arg0] = arg1;
+        delete this._c[arg0]; // clear cache
+        break;
+
+      case 3:
+        // setting('ios', 'key', 'value') = set key/value pair for platform
+        // arg0 = platform
+        // arg1 = key
+        // arg2 = value
+        this._s.platforms = this._s.platforms || {};
+        this._s.platforms[arg0] = this._s.platforms[arg0] || {};
+        this._s.platforms[arg0][arg1] = args[2];
+        delete this._c[arg1]; // clear cache
+        break;
+
+    }
+
+    return this;
+  }
+
+  /**
+   * @private
+   * @name settings()
+   * @description
+   */
+  settings() {
+    const args = arguments;
+
+    switch (args.length) {
+
+      case 0:
+        return this._s;
+
+      case 1:
+        // settings({...})
+        this._s = args[0];
+        this._c = {}; // clear cache
+        break;
+
+      case 2:
+        // settings('ios', {...})
+        this._s.platforms = this._s.platforms || {};
+        this._s.platforms[args[0]] = args[1];
+        this._c = {}; // clear cache
+        break;
+    }
+
+    return this;
+  }
+
   /**
    * @private
    */

ionic/config/test/config.spec.ts

@@ -436,6 +436,14 @@ export function run() {
     expect(config.get('occupation')).toEqual('Weather Man');
   });
 
+  it('should get a fallback value', () => {
+    let config = new Config({
+      name: 'Doc Brown'
+    });
+    expect(config.get('name', 'Marty')).toEqual('Doc Brown');
+    expect(config.get('occupation', 'Weather Man')).toEqual('Weather Man');
+  });
+
   it('should get settings object', () => {
     let config = new Config({
       name: 'Doc Brown',

ionic/platform/registry.ts

@@ -70,6 +70,7 @@ Platform.register({
       // fallback to always use ripple
       return 'ripple';
     },
+    autoFocusAssist: 'immediate',
     hoverCSS: false,
     keyboardHeight: 300,
     mode: 'md',
@@ -93,6 +94,7 @@ Platform.register({
     'iphone'
   ],
   settings: {
+    autoFocusAssist: 'delay',
     clickBlock: true,
     hoverCSS: false,
     keyboardHeight: 300,

ionic/util/dom.ts

@@ -199,13 +199,13 @@ export function hasFocusedTextInput() {
   return false;
 }
 
-const skipInputAttrsReg = /^(value|checked|disabled|type|class|style|id)$/i
+const skipInputAttrsReg = /^(value|checked|disabled|type|class|style|id|autofocus|autocomplete|autocorrect)$/i
 export function copyInputAttributes(srcElement, destElement) {
   // copy attributes from one element to another
   // however, skip over a few of them as they're already
   // handled in the angular world
-  let attrs = srcElement.attributes;
-  for (let i = 0; i < attrs.length; i++) {
+  var attrs = srcElement.attributes;
+  for (var i = 0; i < attrs.length; i++) {
     var attr = attrs[i];
     if (!skipInputAttrsReg.test(attr.name)) {
       destElement.setAttribute(attr.name, attr.value);

ionic/util/test/util.spec.ts

@@ -15,6 +15,10 @@ export function run() {
         expect(util.isTrueProperty(' true  ')).toBe(true);
       });
 
+      it('should be true from string "on"', () => {
+        expect(util.isTrueProperty(true)).toBe(true);
+      });
+
       it('should be true from empty string ""', () => {
         expect(util.isTrueProperty('')).toBe(true);
         expect(util.isTrueProperty('  ')).toBe(true);
@@ -29,6 +33,10 @@ export function run() {
         expect(util.isTrueProperty(false)).toBe(false);
       });
 
+      it('should be false from string "off"', () => {
+        expect(util.isTrueProperty(true)).toBe(true);
+      });
+
       it('should be false from null', () => {
         expect(util.isTrueProperty(null)).toBe(false);
       });

ionic/util/util.ts

@@ -113,7 +113,7 @@ export const isArray = Array.isArray;
 export const isTrueProperty = function(val: any): boolean {
   if (typeof val === 'string') {
     val = val.toLowerCase().trim();
-    return (val === 'true' || val === '');
+    return (val === 'true' || val === 'on' || val === '');
   }
   return !!val;
 };