fix(tagsInput): Fix autosize directive

Fix a bug in the autosize directive which prevents the placeholder width from being correctly calculated when its value contains an interpolated string. Closes #75.
mbenford · Mar 3, 2014 · 12b5beb · 12b5beb
1 parent 8702909
commit 12b5beb
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 26 deletions.
diff --git a/.jshintrc b/.jshintrc
@@ -21,6 +21,7 @@
         "document": true,
         "$": true,
         "beforeEach": true,
+        "afterEach": true,
         "describe": true,
         "it": true,
         "expect": true,

diff --git a/src/autosize.js b/src/autosize.js
@@ -12,29 +12,30 @@ tagsInput.directive('tiAutosize', function() {
         restrict: 'A',
         require: 'ngModel',
         link: function(scope, element, attrs, ctrl) {
-            var span, resize;
+            var THRESHOLD = 3,
+                span, resize;
 
             span = angular.element('<span class="input"></span>');
             span.css('display', 'none')
                 .css('visibility', 'hidden')
-                .css('width', 'auto');
+                .css('width', 'auto')
+                .css('white-space', 'pre');
 
             element.parent().append(span);
 
-            resize = function(value) {
-                var originalValue = value;
+            resize = function(originalValue) {
+                var value = originalValue, width;
 
                 if (angular.isString(value) && value.length === 0) {
-                    value = element.attr('placeholder');
+                    value = attrs.placeholder;
                 }
+
                 span.text(value);
                 span.css('display', '');
-                try {
-                    element.css('width', span.prop('offsetWidth') + 'px');
-                }
-                finally {
-                    span.css('display', 'none');
-                }
+                width = span.prop('offsetWidth') + THRESHOLD;
+                span.css('display', 'none');
+
+                element.css('width', width + 'px');
 
                 return originalValue;
             };

diff --git a/test/autosize.spec.js b/test/autosize.spec.js
@@ -1,27 +1,31 @@
 'use strict';
 
 describe('autosize directive', function() {
-    var $scope, $document, $compile,
-        element;
-
-    // The style tag should be created once, so we can't do it within a beforeEach() callback
-    $('<style> .input { box-sizing: border-box; border: 1px; padding: 2px; font: Arial 18px; }</style>').appendTo('head');
+    var $scope, $compile,
+        element, style, container;
 
     beforeEach(function() {
         module('ngTagsInput');
 
-        inject(function($rootScope, _$document_, _$compile_) {
+        inject(function($rootScope, _$compile_) {
             $scope = $rootScope;
-            $document = _$document_;
             $compile = _$compile_;
         });
+
+        style = angular.element('<style> .input { box-sizing: border-box; border: 1px; padding: 2px; font: Arial 18px; }</style>').appendTo('head');
+        container = angular.element('<div style="width: 300px"></div>').appendTo('body');
+    });
+
+    afterEach(function() {
+        style.remove();
+        container.remove();
     });
 
     function compile() {
         var attributes = $.makeArray(arguments).join(' ');
 
-        element = angular.element('<input class="input" ng-model="model" ti-autosize ' + attributes + '>');
-        $document.find('body').append(element);
+        element = angular.element('<input class="input" ng-model="model" ng-trim="false" ti-autosize ' + attributes + '>');
+        container.append(element);
 
         $compile(element)($scope);
         $scope.$digest();
@@ -30,13 +34,14 @@ describe('autosize directive', function() {
     function getTextWidth(text) {
         var width, span = angular.element('<span class="input"></span>');
 
+        span.css('white-space', 'pre');
         span.text(text);
-        $document.find('body').append(span);
-        width = span.prop('offsetWidth') + 'px';
+        container.append(span);
+        width = parseInt(span.prop('offsetWidth'), 10) + 3;
 
         span.remove();
 
-        return width;
+        return width + 'px';
     }
 
     it('re-sizes the input width when its view content changes', function() {
@@ -67,7 +72,8 @@ describe('autosize directive', function() {
 
     it('sets the input width as the placeholder width when the input is empty', function() {
         // Arrange
-        compile('placeholder="Some placeholder"');
+        $scope.placeholder = 'Some placeholder';
+        compile('placeholder="{{placeholder}}"');
 
         // Act
         $scope.model = '';

diff --git a/test/test-page.html b/test/test-page.html
@@ -36,7 +36,7 @@
   <tags-input class="foo" ng-model="tags" limit-tags="5"
               replace-spaces-with-dashes="true"
               enable-editing-last-tag="true"
-              placeholder="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
+              placeholder="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
               min-tags="3">
     <auto-complete source="loadItems($query)"
                    debounce-delay="0"
@@ -109,7 +109,7 @@
         .config(function(tagsInputConfigProvider) {
             tagsInputConfigProvider
               .setDefaults('tagsInput', {
-                placeholder: 'new tag'
+                placeholder: ''
               })
               .setDefaults('autoComplete', {
                 highlightMatchedText: true