From e9a723c911a8d32964ad771c333f09fc78157172 Mon Sep 17 00:00:00 2001 From: Michael Benford Date: Mon, 3 Mar 2014 22:48:25 -0300 Subject: [PATCH] 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. --- src/autosize.js | 12 +++++++----- test/autosize.spec.js | 15 ++++++++++++++- test/test-page.html | 6 +++++- 3 files changed, 26 insertions(+), 7 deletions(-) diff --git a/src/autosize.js b/src/autosize.js index 0ddca074..ff6c1c46 100644 --- 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 index bbc4b444..5d4965ac 100644 --- a/test/autosize.spec.js +++ b/test/autosize.spec.js @@ -13,7 +13,7 @@ describe('autosize directive', function() { }); style = angular.element('').appendTo('head'); - container = angular.element('
').appendTo('body'); + container = angular.element('
').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(''); + }); }); \ No newline at end of file diff --git a/test/test-page.html b/test/test-page.html index 7291fa41..8f0f949a 100644 --- 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 @@ -