From a9b7d435026ce6fd33c08561e4400cc9b8d3ada5 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Tue, 11 Aug 2015 10:53:17 +0200
Subject: [PATCH] Umb auto resize: Only resize length of text inputs and height
 of textareas. Set inputs with no data the width of the placeholder.

---
 .../editors/umbAutoResize.directive.js        | 57 ++++++++++++++-----
 1 file changed, 43 insertions(+), 14 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/editors/umbAutoResize.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/editors/umbAutoResize.directive.js
index 35007909eb..e6746b4c09 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/editors/umbAutoResize.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/editors/umbAutoResize.directive.js
@@ -1,24 +1,46 @@
 angular.module("umbraco.directives")
     .directive('umbAutoResize', function($timeout) {
         return {
-            require: "^?umbTabs",
-            link: function(scope, element, attr, tabsCtrl) {
+            require: ["^?umbTabs", "ngModel"],
+            link: function(scope, element, attr, controllersArr) {
+
                 var domEl = element[0];
+                var domElType = domEl.type;
+                var umbTabsController = controllersArr[0];
+                var ngModelController = controllersArr[1];
+
                 var update = function(force) {
-                    if (force === true) {
-                        element.height(0);
-                    element.width(0);
+
+
+                  if (force === true) {
+
+                    if (domElType === "textarea") {
+                      element.height(0);
+                    } else if (domElType === "text") {
+                      element.width(0);
+                    }
+                  }
+
+                  if (domEl.scrollHeight !== domEl.clientHeight && domElType === "textarea") {
+                    element.height(domEl.scrollHeight);
+                  } else if (domEl.scrollWidth !== domEl.clientWidth && domElType === "text") {
+
+                    if (ngModelController.$modelValue === undefined || ngModelController.$modelValue === "" || ngModelController.$modelValue === null) {
+
+                      if (attr.placeholder) {
+                        attr.$set('size', attr.placeholder.length);
+                        element.width('auto');
+                      }
+
+                    } else {
+                      element.width(domEl.scrollWidth);
                     }
 
-                    if (domEl.scrollHeight !== domEl.clientHeight) {
-                        element.height(domEl.scrollHeight);
-                    }
+                  }
 
-                if(domEl.scrollWidth !== domEl.clientWidth) {
-                    element.width(domEl.scrollWidth);
-                }
 
                 };
+
                 var blur = function() {
                     update(true);
                 };
@@ -30,17 +52,24 @@ angular.module("umbraco.directives")
                     update(true);
                 }, 200);
 
-
                 //listen for tab changes
-                if (tabsCtrl != null) {
-                    tabsCtrl.onTabShown(function(args) {
+                if (umbTabsController != null) {
+                    umbTabsController.onTabShown(function(args) {
                         update();
                     });
                 }
 
+                // listen for ng-model changes
+                var unbindModelWatcher = scope.$watch(function () {
+                  return ngModelController.$modelValue;
+                }, function(newValue) {
+                  update(true);
+                });
+
                 scope.$on('$destroy', function () {
                     element.unbind('keyup keydown keypress change', update);
                     element.unbind('blur', blur);
+                    unbindModelWatcher();
                 });
             }
         };