feat(textfield): keep non input attributes on the outer element

fixes #280
stasson · Feb 25, 2018 · c8795d9 · c8795d9
1 parent 7b01357
commit c8795d9
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 9 deletions.
diff --git a/components/textfield/README.md b/components/textfield/README.md
@@ -121,7 +121,7 @@ var vm = new Vue({
 | `trailing-icon`       | [String, Array, Object ] |         | trailing icon _*_                                    |
 | `leading-icon`        | [String, Array, Object ] |         | leading icon _*_                                     |
 
-> other attributes (`name`, `readonly`, ... ) are being passed down to the rendered input element.
+> other input attributes (`name`, `readonly`, ... ) are being passed down to the rendered input element.
 
 > (*) icon prop usage: use `String` for material icons, `Array` to specify icon classList,  `{className: String, textContent: String}` for custom class and/or content, or use `trailing-icon` or `leading-icon` slots for  custom icon markup (svg, ...).
 

diff --git a/components/textfield/mdc-textfield.vue b/components/textfield/mdc-textfield.vue
@@ -12,7 +12,7 @@
 
       <textarea ref="input" v-if="multiline"
         v-on="$listeners"
-        v-bind="$attrs"
+        v-bind="inputAttrs"
         :class="inputClasses"
         @input="updateValue($event.target.value)"
         :minlength="minlength" :maxlength="maxlength"
@@ -24,7 +24,7 @@
 
       <input ref="input" v-else
         v-on="$listeners" 
-        v-bind="$attrs"
+        v-bind="inputAttrs"
         :class="inputClasses"
         @input="updateValue($event.target.value)"
         :type="type"
@@ -79,7 +79,6 @@ import {RippleBase} from '../ripple'
 export default {
   name: 'mdc-textfield',
   mixins: [CustomElementMixin, DispatchFocusMixin],
-  inheritAttrs: false,
   model: {
     prop: 'value',
     event: 'model'
@@ -104,15 +103,21 @@ export default {
     disabled: Boolean,
     required: Boolean,
     valid: {type: Boolean, default: undefined}, 
-    minlength: { type: [Number, String], default: undefined },
-    maxlength: { type: [Number, String], default: undefined },
-    size: { type: [Number, String], default: 20 },
     fullwidth: Boolean,
     multiline: Boolean,
-    rows: { type: [Number, String], default: 8 },
-    cols: { type: [Number, String], default: 40 },
     leadingIcon: [String, Array, Object],
     trailingIcon: [String, Array, Object],
+    size: { type: [Number, String], default: 20 },
+    minlength: { type: [Number, String], default: undefined },
+    maxlength: { type: [Number, String], default: undefined },
+    rows: { type: [Number, String], default: 8 },
+    cols: { type: [Number, String], default: 40 },
+    
+    // other input props  
+    name: String,
+    readonly: Boolean,
+    autocomplete: Boolean,
+    autofocus: Boolean,
   },
   data: function () {
     return {
@@ -188,6 +193,10 @@ export default {
     }
   },
   computed: {
+    inputAttrs () {
+      let { name, readonly, autocomplete, autofocus} = this
+      return { name, readonly, autocomplete, autofocus};
+    },
     inputPlaceHolder () {
       return this.fullwidth ? this.label : undefined
     },