From 1458ba624a876a25ac0d8776388ecf4a16cc6aa7 Mon Sep 17 00:00:00 2001
From: Michael Benford <michael@michaelbenford.net>
Date: Sun, 23 Mar 2014 21:27:37 -0300
Subject: [PATCH] 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.
---
 src/tags-input.js         |  1 +
 templates/tags-input.html |  1 -
 test/tags-input.spec.js   | 65 +++++++++++++++++++++++++++++++--------
 test/test-page.html       |  4 +--
 4 files changed, 56 insertions(+), 15 deletions(-)

diff --git a/src/tags-input.js b/src/tags-input.js
index 89e53c55..1d9bee00 100644
--- 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
index 73519e74..78d39261 100644
--- 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
index 0ee2674f..acca6525 100644
--- 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
index 23e70972..1af6b920 100644
--- 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"