fix(input): copy custom attrs from ion-input to native input

Author: adamdbradley

ionic/components/input/input-base.ts

@@ -8,7 +8,7 @@ import {Item} from '../item/item';
 import {IonicApp} from '../app/app';
 import {isTrueProperty} from '../../util/util';
 import {Label} from '../label/label';
-import {pointerCoord, hasPointerMoved, closest}  from '../../util/dom';
+import {pointerCoord, hasPointerMoved, closest, copyInputAttributes}  from '../../util/dom';
 import {NavController} from '../nav/nav-controller';
 import {NativeInput, NextInput} from './native-input';
 import {Platform} from '../../platform/platform';
@@ -132,7 +132,7 @@ export class InputBase {
     if (val) {
       val = val.toLowerCase();
 
-      if (/password|email|number|search|tel|url|date|datetime|datetime-local|month|time|week/.test(val)) {
+      if (/password|email|number|search|tel|url|date|month|time|week/.test(val)) {
         this._type = val;
       }
     }
@@ -175,6 +175,9 @@ export class InputBase {
 
     this.checkHasValue(nativeInput.getValue());
     this.disabled = this._disabled;
+
+    // copy ion-input attributes to the native input element
+    copyInputAttributes(this._elementRef.nativeElement, nativeInput.element());
   }
 
   /**

ionic/components/input/native-input.ts

@@ -127,7 +127,7 @@ export class NativeInput {
   /**
    * @private
    */
-  private element(): HTMLInputElement {
+  element(): HTMLInputElement {
     return this._elementRef.nativeElement;
   }
 

ionic/components/input/test/form-inputs/main.html

@@ -90,6 +90,17 @@
   <ion-input placeholder="Stand-alone textarea"></ion-input>
 
   <ion-list>
+    <ion-item>
+      <ion-label>Custom Attrs</ion-label>
+      <ion-input autocomplete="off"
+                 spellcheck="no"
+                 required
+                 some-weird-attr="value"
+                 accept="sure"
+                 class="no-copy" id="no-copy" checked=checked
+                 value="copy custom attributes"></ion-input>
+    </ion-item>
+
     <ion-item>
       <ion-label>Disabled Input</ion-label>
       <ion-input disabled value="Value"></ion-input>

ionic/util/dom.ts

@@ -198,6 +198,20 @@ export function hasFocusedTextInput() {
   return false;
 }
 
+const skipInputAttrsReg = /^(value|checked|disabled|type|class|style|id)$/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 attr = attrs[i];
+    if (!skipInputAttrsReg.test(attr.name)) {
+      destElement.setAttribute(attr.name, attr.value);
+    }
+  }
+}
+
 let matchesFn: string;
 let matchesMethods: Array<string> = ['matches','webkitMatchesSelector','mozMatchesSelector','msMatchesSelector'];
 matchesMethods.some((fn: string) => {