Create textarea flow

package.json

@@ -15,6 +15,7 @@
     "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
   },
   "dependencies": {
+    "autosize": "^3.0.17",
     "scopedQuerySelectorShim": "github:lazd/scopedQuerySelectorShim"
   },
   "devDependencies": {

src/components/mdInputContainer/mdInputContainer.scss

@@ -42,10 +42,9 @@ $input-size: 32px;
     background: none;
     border-bottom: 1px solid rgba(#000, .12);
     transition: $swift-ease-out;
-    transition-property: font-size, line-height;
+    transition-property: font-size;
     color: rgba(#000, .54);
     font-size: 0;
-    line-height: 0;
 
     &:focus {
       outline: none;
@@ -53,8 +52,9 @@ $input-size: 32px;
   }
 
   textarea {
-    height: auto;
     min-height: 32px;
+    padding: 4px 0;
+    line-height: 1.5em;
     resize: none;
   }
 }
@@ -70,7 +70,6 @@ $input-size: 32px;
   input,
   textarea {
     font-size: 16px;
-    line-height: $input-size;
   }
 }
 
@@ -82,6 +81,10 @@ $input-size: 32px;
 }
 
 .md-input-inline {
+  label {
+    pointer-events: none;
+  }
+
   &.md-input-focused {
     label {
       top: 23px;

src/components/mdInputContainer/mdInputContainer.vue

@@ -11,6 +11,8 @@
 <style lang="scss" src="./mdInputContainer.scss"></style>
 
 <script>
+  import autosize from 'autosize';
+
   let focusedClass = 'md-input-focused';
   let inlineClass = 'md-input-inline';
   let disabledClass = 'md-input-disabled';
@@ -106,6 +108,12 @@
 
       manageHasValueClass(this.input, container);
       manageDisabled(this.mdDisabled, this.input);
+
+      if (this.input.tagName.toLowerCase() === 'textarea') {
+        this.input.setAttribute('rows', '1');
+
+        autosize(this.input);
+      }
     },
     beforeDestroy() {
       this.input.removeEventListener('focus', focusBindFunction);