From 73ceeb8b86c0fd771d5b43f715bf1846c6e96f8c Mon Sep 17 00:00:00 2001
From: erbear <erbert.b@gmail.com>
Date: Fri, 7 Nov 2014 21:39:19 +0100
Subject: [PATCH] feat(textField): Add multiline option to input

Multiline option with autoexpanding add as a value of type attribute.

#212
---
 src/components/textField/_textField.scss |  5 +++++
 src/components/textField/textField.js    | 27 +++++++++++++++++++++++-
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/src/components/textField/_textField.scss b/src/components/textField/_textField.scss
index 7b226e00ed0..ee2a6dcb95f 100644
--- a/src/components/textField/_textField.scss
+++ b/src/components/textField/_textField.scss
@@ -88,6 +88,11 @@ md-input-group,
   input, textarea {
     background: none;
   }
+
+  textarea {
+    resize: none;
+    overflow: hidden;
+  }
 }
 
 // Light-Theme
diff --git a/src/components/textField/textField.js b/src/components/textField/textField.js
index 79136bb00c1..9ab07b2a7d2 100644
--- a/src/components/textField/textField.js
+++ b/src/components/textField/textField.js
@@ -135,7 +135,14 @@ function mdInputDirective($mdUtil) {
   return {
     restrict: 'E',
     replace: true,
-    template: '<input >',
+    template: function(element, attr){
+      isTextarea = element.parent().attr('type') == "multiline";
+
+      if (isTextarea)
+        return '<textarea rows="1"></textarea>'
+      else
+        return '<input>'
+    },
     require: ['^?mdInputGroup', '?ngModel'],
     link: function(scope, element, attr, ctrls) {
       var inputGroupCtrl = ctrls[0];
@@ -180,6 +187,24 @@ function mdInputDirective($mdUtil) {
         inputGroupCtrl.setHasValue(false);
       });
 
+      element.on('scroll', function(e){
+        var textarea = e.target;
+        textarea.scrollTop = 0;
+
+        // for smooth new line adding
+        var line = textarea.scrollHeight - textarea.offsetHeight;
+        height = textarea.offsetHeight + line;
+        textarea.style.height = height;
+      });
+
+      element.on('keyup', function(e){
+        var textarea = e.target;
+        textarea.style.height = "auto";
+        var line = textarea.scrollHeight - textarea.offsetHeight;
+        textarea.scrollTop = 0;
+        height = textarea.offsetHeight + (line > 0 ? line : 0);
+        textarea.style.height = height;
+      });
 
       function isNotEmpty(value) {
         value = angular.isUndefined(value) ? element.val() : value;