feat(tagsInput): Make maxLength consistent with minLength

Make maxLength option behave like minLength option, i.e. instead of preventing lengthy tags from being typed it allows them but keep them from being added. Closes #53.
mbenford · Mar 24, 2014 · 1458ba6 · 1458ba6
1 parent 0205f58
commit 1458ba6
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 15 deletions.
diff --git a/src/tags-input.js b/src/tags-input.js
@@ -46,6 +46,7 @@ tagsInput.directive('tagsInput', function($timeout, $document, tagsInputConfig)
             var tagText = getTagText(tag);
 
             return tagText.length >= options.minLength &&
+                   tagText.length <= (options.maxLength || tagText.length) &&
                    options.allowedTagsPattern.test(tagText) &&
                    !findInObjectArray(self.items, tag, options.displayProperty);
         };

diff --git a/templates/tags-input.html b/templates/tags-input.html
@@ -9,7 +9,6 @@
     <input type="text"
            class="input"
            placeholder="{{options.placeholder}}"
-           maxlength="{{options.maxLength}}"
            tabindex="{{options.tabindex}}"
            ng-model="newTag.text"
            ng-change="newTagChange()"

diff --git a/test/tags-input.spec.js b/test/tags-input.spec.js
@@ -587,7 +587,28 @@ describe('tags-input directive', function() {
     });
 
     describe('min-length option', function() {
-        it('adds a new tag only if its length is greater than or equal to min-length option', function() {
+        it('initializes the option to 3', function() {
+            // Arrange/Act
+            compile();
+
+            // Assert
+            expect(isolateScope.options.minLength).toBe(3);
+        });
+
+        it('adds a new tag if the input length is greater than the min-length option', function() {
+            // Arrange
+            compile('min-length="5"');
+
+            // Act
+            newTag('foobar');
+
+            // Assert
+            expect($scope.tags).toEqual([{ text: 'foobar' }]);
+            expect(getInput()).not.toHaveClass('invalid-tag');
+
+        });
+
+        it('does not add a new tag if the input length is less than the min-length option', function() {
             // Arrange
             compile('min-length="5"');
 
@@ -596,32 +617,52 @@ describe('tags-input directive', function() {
 
             // Assert
             expect($scope.tags).toEqual([]);
+            expect(getInput()).toHaveClass('invalid-tag');
         });
+    });
 
-        it('initializes the option to 3', function() {
+    describe('max-length option', function() {
+        it('initializes the option to undefined', function() {
             // Arrange/Act
             compile();
 
             // Assert
-            expect(isolateScope.options.minLength).toBe(3);
+            expect(isolateScope.options.maxLength).toBeUndefined();
         });
-    });
 
-    describe('max-length option', function() {
-        it('sets the maxlength attribute of the input field to max-length option', function() {
-            // Arrange/Act
-            compile('max-length="10"');
+        it('adds a new tag if the input length is less than the max-length option', function() {
+            // Arrange
+            compile('max-length="5"');
+
+            // Act
+            newTag('foo');
 
             // Assert
-            expect(getInput().attr('maxlength')).toBe('10');
+            expect($scope.tags).toEqual([{ text: 'foo' }]);
+            expect(getInput()).not.toHaveClass('invalid-tag');
         });
 
-        it('initializes the option to empty', function() {
-            // Arrange/Act
+        it('adds a new tag of any length if the max-length option has no value', function() {
+            // Arrange
             compile();
 
+            // Act
+            newTag('foooooooooooooooooooooooooooooooooooooooooooooooooooooooobar');
+
             // Assert
-            expect(getInput().attr('maxlength')).toBe('');
+            expect($scope.tags).toEqual([{ text: 'foooooooooooooooooooooooooooooooooooooooooooooooooooooooobar' }]);
+        });
+
+        it('does not add a new tag if the input length is greater than the max-length option', function() {
+            // Arrange
+            compile('max-length="5"');
+
+            // Act
+            newTag('foobar');
+
+            // Assert
+            expect($scope.tags).toEqual([]);
+            expect(getInput()).toHaveClass('invalid-tag');
         });
     });
 

diff --git a/test/test-page.html b/test/test-page.html
@@ -42,7 +42,7 @@
   </style>
 </head>
 <body ng-controller="Ctrl">
-  <tags-input style="display: none" class="foo" ng-model="tags" limit-tags="5"
+  <tags-input class="foo" ng-model="tags" limit-tags="5"
               replace-spaces-with-dashes="true"
               enable-editing-last-tag="true"
               placeholder="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
@@ -53,7 +53,7 @@
                    max-results-to-show="10">
     </auto-complete>
   </tags-input>
-  <tags-input ng-init="tags2=['item1', 'item2', 'item3']" ng-model="tags2" display-property="label" add-on-blur="false" placeholder="Add a superhero">
+  <tags-input ng-init="tags2=['item1', 'item2', 'item3']" ng-model="tags2" display-property="label" add-on-blur="false" placeholder="Add a superhero" max-length="5">
     <auto-complete source="loadItems2($query)"
                    debounce-delay="0"
                    min-length="1"