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

Related: #5480

Author: adamdbradley

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>