fix(tagsInput): Add spellcheck option

As before spellcheck is enabled by default unless explicitly disabled. This matches native browser functionality. The option name is the same as the html attribute for <input> elements, so it should be familiar to users.
mbenford · Dec 17, 2014 · 166f835 · 166f835
1 parent 843be9d
commit 166f835
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 3 deletions.
diff --git a/src/tags-input.js b/src/tags-input.js
@@ -34,6 +34,7 @@
  * @param {boolean=} [addFromAutocompleteOnly=false] Flag indicating that only tags coming from the autocomplete list will be allowed.
  *                                                   When this flag is true, addOnEnter, addOnComma, addOnSpace, addOnBlur and
  *                                                   allowLeftoverText values are ignored.
+ * @param {boolean=} [spellcheck=true] Flag indicating whether the browser's spellcheck is enabled for the input field or not.
  * @param {expression} onTagAdded Expression to evaluate upon adding a new tag. The new tag is available as $tag.
  * @param {expression} onInvalidTag Expression to evaluate when a tag is invalid. The invalid tag is available as $tag.
  * @param {expression} onTagRemoved Expression to evaluate upon removing an existing tag. The removed tag is available as $tag.
@@ -150,7 +151,8 @@ tagsInput.directive('tagsInput', function($timeout, $document, tagsInputConfig)
                 maxTags: [Number, MAX_SAFE_INTEGER],
                 displayProperty: [String, 'text'],
                 allowLeftoverText: [Boolean, false],
-                addFromAutocompleteOnly: [Boolean, false]
+                addFromAutocompleteOnly: [Boolean, false],
+                spellcheck: [Boolean, true]
             });
 
             $scope.tagList = new TagList($scope.options, $scope.events);

diff --git a/templates/tags-input.html b/templates/tags-input.html
@@ -15,7 +15,7 @@
            ng-paste="eventHandlers.input.paste($event)"
            ng-trim="false"
            ng-class="{'invalid-tag': newTag.invalid}"
-           ti-bind-attrs="{type: options.type, placeholder: options.placeholder, tabindex: options.tabindex}"
+           ti-bind-attrs="{type: options.type, placeholder: options.placeholder, tabindex: options.tabindex, spellcheck: options.spellcheck}"
            ti-autosize>
   </div>
 </div>
diff --git a/test/tags-input.spec.js b/test/tags-input.spec.js
@@ -696,6 +696,26 @@ describe('tags-input directive', function() {
         });
     });
 
+    describe('spellcheck option', function() {
+        it('sets the input\'s spellcheck property', function() {
+            ['true', 'false'].forEach(function(value) {
+                // Arrange/Act
+                compile('spellcheck="' + value + '"');
+
+                // Assert
+                expect(getInput().attr('spellcheck')).toBe(value);
+            });
+        });
+
+        it('initializes the option to "true"', function() {
+            // Arrange/Act
+            compile();
+
+            // Assert
+            expect(isolateScope.options.spellcheck).toBe(true);
+        });
+    });
+
     describe('placeholder option', function() {
         it('sets the input\'s placeholder text', function() {
             // Arrange/Act

diff --git a/test/test-page.html b/test/test-page.html
@@ -45,7 +45,7 @@
 </head>
 <body ng-controller="Ctrl">
     <p></p>
-    <tags-input ng-model="tags" add-on-blur="false" ng-focus="focus()" ng-blur="blur()" add-on-paste="true" paste-split-pattern="[,;|]">
+    <tags-input ng-model="tags" add-on-blur="false" ng-focus="focus()" ng-blur="blur()" add-on-paste="true" paste-split-pattern="[,;|]" spellcheck="false">
         <auto-complete source="loadItems($query)" load-on-down-arrow="true"></auto-complete>
     </tags-input>
     <p></p>