fix(tagsInput): Fix autosize directive

Fix the autosize directive so the input width isn't set when the element is hidden and therefore can't have its size calculated. Clearing the width property allows the user to define a default width by using CSS classes. Closes #84.
mbenford · Mar 4, 2014 · e9a723c · e9a723c
1 parent 12b5beb
commit e9a723c
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 7 deletions.
diff --git a/src/autosize.js b/src/autosize.js
@@ -30,12 +30,14 @@ tagsInput.directive('tiAutosize', function() {
                     value = attrs.placeholder;
                 }
 
-                span.text(value);
-                span.css('display', '');
-                width = span.prop('offsetWidth') + THRESHOLD;
-                span.css('display', 'none');
+                if (value) {
+                    span.text(value);
+                    span.css('display', '');
+                    width = span.prop('offsetWidth');
+                    span.css('display', 'none');
+                }
 
-                element.css('width', width + 'px');
+                element.css('width', width ? width + THRESHOLD + 'px' : '');
 
                 return originalValue;
             };

diff --git a/test/autosize.spec.js b/test/autosize.spec.js
@@ -13,7 +13,7 @@ describe('autosize directive', function() {
         });
 
         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');
+        container = angular.element('<div></div>').appendTo('body');
     });
 
     afterEach(function() {
@@ -82,4 +82,17 @@ describe('autosize directive', function() {
         // Assert
         expect(element.css('width')).toBe(getTextWidth('Some placeholder'));
     });
+
+    it('clears the input width when it cannot be calculated', function() {
+        // Arrange
+        container.hide();
+        compile();
+
+        // Act
+        element.val('AAAAAAAAAAAAAA');
+        element.trigger('input');
+
+        // Assert
+        expect(element.prop('style').width).toBe('');
+    });
 });
diff --git a/test/test-page.html b/test/test-page.html
@@ -14,6 +14,10 @@
       padding-left: 3px;
     }
 
+    .foo .tags .input {
+      width: 1036px;
+    }
+
     .foo.ng-pristine .tags {
       background-color: green;
     }
@@ -33,7 +37,7 @@
   </style>
 </head>
 <body ng-controller="Ctrl">
-  <tags-input class="foo" ng-model="tags" limit-tags="5"
+  <tags-input style="display: none" class="foo" ng-model="tags" limit-tags="5"
               replace-spaces-with-dashes="true"
               enable-editing-last-tag="true"
               placeholder="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"