feat(tagsInput): Added addOnBlur option

Added an option for the user to set if a tag should be created when the input field loses focus and there is some text left in it. This feature is important because it prevents a tag from being accidentally lost when it's not explicitly added. Closes #29.
mbenford · Dec 5, 2013 · 69415a2 · 69415a2
1 parent c2b43c6
commit 69415a2
Show file tree

Hide file tree

Showing 8 changed files with 190 additions and 57 deletions.
diff --git a/build/ng-tags-input.css b/build/ng-tags-input.css
@@ -7,6 +7,10 @@
     position: relative;
 }
 
+.ngTagsInput:active {
+    outline: none;
+}
+
 .ngTagsInput .tags {
     -moz-appearance: textfield;
     -webkit-appearance: textfield;

diff --git a/build/ng-tags-input.js b/build/ng-tags-input.js
@@ -31,6 +31,7 @@ angular.module('tags-input', []);
  * @param {boolean=} [addOnEnter=true] Flag indicating that a new tag will be added on pressing the ENTER key.
  * @param {boolean=} [addOnSpace=false] Flag indicating that a new tag will be added on pressing the SPACE key.
  * @param {boolean=} [addOnComma=true] Flag indicating that a new tag will be added on pressing the COMMA key.
+ * @param {boolean=} [addOnBlur=true] Flag indicating that a new tag will be added when the input field loses focus.
  * @param {boolean=} [replaceSpacesWithDashes=true] Flag indicating that spaces will be replaced with dashes.
  * @param {string=} [allowedTagsPattern=^[a-zA-Z0-9\s]+$*] Regular expression that determines whether a new tag is valid.
  * @param {boolean=} [enableEditingLastTag=false] Flag indicating that the last tag will be moved back into
@@ -39,7 +40,7 @@ angular.module('tags-input', []);
  * @param {expression} onTagAdded Expression to evaluate upon adding a new tag. The new tag is available as $tag.
  * @param {expression} onTagRemoved Expression to evaluate upon removing an existing tag. The removed tag is available as $tag.
  */
-angular.module('tags-input').directive('tagsInput', ["configuration", function(configuration) {
+angular.module('tags-input').directive('tagsInput', ["$timeout","$document","configuration", function($timeout, $document, configuration) {
     function SimplePubSub() {
         var events = {};
 
@@ -67,7 +68,7 @@ angular.module('tags-input').directive('tagsInput', ["configuration", function(c
         },
         replace: false,
         transclude: true,
-        template: '<div class="ngTagsInput" ng-class="options.customClass" transclude-append>' +
+        template: '<div class="ngTagsInput" tabindex="-1" ng-class="options.customClass" transclude-append>' +
                   '  <div class="tags">' +
                   '    <ul>' +
                   '      <li ng-repeat="tag in tags" ng-class="getCssClass($index)">' +
@@ -99,6 +100,7 @@ angular.module('tags-input').directive('tagsInput', ["configuration", function(c
                 addOnEnter: { type: Boolean, defaultValue: true },
                 addOnSpace: { type: Boolean, defaultValue: false },
                 addOnComma: { type: Boolean, defaultValue: true },
+                addOnBlur: { type: Boolean, defaultValue: true },
                 allowedTagsPattern: { type: RegExp, defaultValue: /^[a-zA-Z0-9\s]+$/ },
                 enableEditingLastTag: { type: Boolean, defaultValue: false }
             });
@@ -201,39 +203,52 @@ angular.module('tags-input').directive('tagsInput', ["configuration", function(c
             var hotkeys = [KEYS.enter, KEYS.comma, KEYS.space, KEYS.backspace];
             var input = element.find('input');
 
-            input.on('keydown', function(e) {
-                var key;
+            input
+                .on('keydown', function(e) {
+                    var key;
 
-                // This hack is needed because jqLite doesn't implement stopImmediatePropagation properly.
-                // I've sent a PR to Angular addressing this issue and hopefully it'll be fixed soon.
-                // https://github.com/angular/angular.js/pull/4833
-                if (e.isImmediatePropagationStopped && e.isImmediatePropagationStopped()) {
-                    return;
-                }
+                    // This hack is needed because jqLite doesn't implement stopImmediatePropagation properly.
+                    // I've sent a PR to Angular addressing this issue and hopefully it'll be fixed soon.
+                    // https://github.com/angular/angular.js/pull/4833
+                    if (e.isImmediatePropagationStopped && e.isImmediatePropagationStopped()) {
+                        return;
+                    }
 
-                if (hotkeys.indexOf(e.keyCode) === -1) {
-                    return;
-                }
+                    if (hotkeys.indexOf(e.keyCode) === -1) {
+                        return;
+                    }
 
-                key = e.keyCode;
+                    key = e.keyCode;
 
-                if (key === KEYS.enter && scope.options.addOnEnter ||
-                    key === KEYS.comma && scope.options.addOnComma ||
-                    key === KEYS.space && scope.options.addOnSpace) {
+                    if (key === KEYS.enter && scope.options.addOnEnter ||
+                        key === KEYS.comma && scope.options.addOnComma ||
+                        key === KEYS.space && scope.options.addOnSpace) {
 
-                    if (scope.tryAdd()) {
-                        scope.$apply();
+                        if (scope.tryAdd()) {
+                            scope.$apply();
+                        }
+                        e.preventDefault();
                     }
-                    e.preventDefault();
-                }
-                else if (key === KEYS.backspace && this.value.length === 0) {
-                    if (scope.tryRemoveLast()) {
-                        scope.$apply();
+                    else if (key === KEYS.backspace && this.value.length === 0) {
+                        if (scope.tryRemoveLast()) {
+                            scope.$apply();
 
-                        e.preventDefault();
+                            e.preventDefault();
+                        }
                     }
-                }
-            });
+                })
+                .on('blur', function() {
+                    if (!scope.options.addOnBlur) {
+                        return;
+                    }
+
+                    $timeout(function() {
+                        var parentElement = angular.element($document[0].activeElement).parent();
+                        if (parentElement[0] !== element[0] && scope.tryAdd()) {
+                            scope.$apply();
+                        }
+                    }, 0);
+                });
 
             element.find('div').on('click', function() {
                 input[0].focus();

diff --git a/build/ng-tags-input.min.zip b/build/ng-tags-input.min.zip
diff --git a/build/ng-tags-input.zip b/build/ng-tags-input.zip
diff --git a/css/tags-input.css b/css/tags-input.css
@@ -7,6 +7,10 @@
     position: relative;
 }
 
+.ngTagsInput:active {
+    outline: none;
+}
+
 .ngTagsInput .tags {
     -moz-appearance: textfield;
     -webkit-appearance: textfield;

diff --git a/src/tags-input.js b/src/tags-input.js
@@ -20,6 +20,7 @@ angular.module('tags-input', []);
  * @param {boolean=} [addOnEnter=true] Flag indicating that a new tag will be added on pressing the ENTER key.
  * @param {boolean=} [addOnSpace=false] Flag indicating that a new tag will be added on pressing the SPACE key.
  * @param {boolean=} [addOnComma=true] Flag indicating that a new tag will be added on pressing the COMMA key.
+ * @param {boolean=} [addOnBlur=true] Flag indicating that a new tag will be added when the input field loses focus.
  * @param {boolean=} [replaceSpacesWithDashes=true] Flag indicating that spaces will be replaced with dashes.
  * @param {string=} [allowedTagsPattern=^[a-zA-Z0-9\s]+$*] Regular expression that determines whether a new tag is valid.
  * @param {boolean=} [enableEditingLastTag=false] Flag indicating that the last tag will be moved back into
@@ -28,7 +29,7 @@ angular.module('tags-input', []);
  * @param {expression} onTagAdded Expression to evaluate upon adding a new tag. The new tag is available as $tag.
  * @param {expression} onTagRemoved Expression to evaluate upon removing an existing tag. The removed tag is available as $tag.
  */
-angular.module('tags-input').directive('tagsInput', function(configuration) {
+angular.module('tags-input').directive('tagsInput', function($timeout, $document, configuration) {
     function SimplePubSub() {
         var events = {};
 
@@ -56,7 +57,7 @@ angular.module('tags-input').directive('tagsInput', function(configuration) {
         },
         replace: false,
         transclude: true,
-        template: '<div class="ngTagsInput" ng-class="options.customClass" transclude-append>' +
+        template: '<div class="ngTagsInput" tabindex="-1" ng-class="options.customClass" transclude-append>' +
                   '  <div class="tags">' +
                   '    <ul>' +
                   '      <li ng-repeat="tag in tags" ng-class="getCssClass($index)">' +
@@ -88,6 +89,7 @@ angular.module('tags-input').directive('tagsInput', function(configuration) {
                 addOnEnter: { type: Boolean, defaultValue: true },
                 addOnSpace: { type: Boolean, defaultValue: false },
                 addOnComma: { type: Boolean, defaultValue: true },
+                addOnBlur: { type: Boolean, defaultValue: true },
                 allowedTagsPattern: { type: RegExp, defaultValue: /^[a-zA-Z0-9\s]+$/ },
                 enableEditingLastTag: { type: Boolean, defaultValue: false }
             });
@@ -190,39 +192,52 @@ angular.module('tags-input').directive('tagsInput', function(configuration) {
             var hotkeys = [KEYS.enter, KEYS.comma, KEYS.space, KEYS.backspace];
             var input = element.find('input');
 
-            input.on('keydown', function(e) {
-                var key;
+            input
+                .on('keydown', function(e) {
+                    var key;
 
-                // This hack is needed because jqLite doesn't implement stopImmediatePropagation properly.
-                // I've sent a PR to Angular addressing this issue and hopefully it'll be fixed soon.
-                // https://github.com/angular/angular.js/pull/4833
-                if (e.isImmediatePropagationStopped && e.isImmediatePropagationStopped()) {
-                    return;
-                }
+                    // This hack is needed because jqLite doesn't implement stopImmediatePropagation properly.
+                    // I've sent a PR to Angular addressing this issue and hopefully it'll be fixed soon.
+                    // https://github.com/angular/angular.js/pull/4833
+                    if (e.isImmediatePropagationStopped && e.isImmediatePropagationStopped()) {
+                        return;
+                    }
 
-                if (hotkeys.indexOf(e.keyCode) === -1) {
-                    return;
-                }
+                    if (hotkeys.indexOf(e.keyCode) === -1) {
+                        return;
+                    }
 
-                key = e.keyCode;
+                    key = e.keyCode;
 
-                if (key === KEYS.enter && scope.options.addOnEnter ||
-                    key === KEYS.comma && scope.options.addOnComma ||
-                    key === KEYS.space && scope.options.addOnSpace) {
+                    if (key === KEYS.enter && scope.options.addOnEnter ||
+                        key === KEYS.comma && scope.options.addOnComma ||
+                        key === KEYS.space && scope.options.addOnSpace) {
 
-                    if (scope.tryAdd()) {
-                        scope.$apply();
+                        if (scope.tryAdd()) {
+                            scope.$apply();
+                        }
+                        e.preventDefault();
                     }
-                    e.preventDefault();
-                }
-                else if (key === KEYS.backspace && this.value.length === 0) {
-                    if (scope.tryRemoveLast()) {
-                        scope.$apply();
+                    else if (key === KEYS.backspace && this.value.length === 0) {
+                        if (scope.tryRemoveLast()) {
+                            scope.$apply();
 
-                        e.preventDefault();
+                            e.preventDefault();
+                        }
                     }
-                }
-            });
+                })
+                .on('blur', function() {
+                    if (!scope.options.addOnBlur) {
+                        return;
+                    }
+
+                    $timeout(function() {
+                        var parentElement = angular.element($document[0].activeElement).parent();
+                        if (parentElement[0] !== element[0] && scope.tryAdd()) {
+                            scope.$apply();
+                        }
+                    }, 0);
+                });
 
             element.find('div').on('click', function() {
                 input[0].focus();

diff --git a/test/tags-input.spec.js b/test/tags-input.spec.js
@@ -2,15 +2,17 @@
 'use strict';
 
 describe('tags-input-directive', function() {
-    var $compile, $scope,
+    var $compile, $scope, $timeout, $document,
         isolateScope, element;
 
     beforeEach(function() {
         module('tags-input');
 
-        inject(function(_$compile_, _$rootScope_) {
+        inject(function(_$compile_, _$rootScope_, _$document_, _$timeout_) {
             $compile = _$compile_;
             $scope = _$rootScope_;
+            $document = _$document_;
+            $timeout = _$timeout_;
         });
     });
 
@@ -332,6 +334,96 @@ describe('tags-input-directive', function() {
         });
     });
 
+    describe('add-on-blur option', function() {
+        it('initializes the option to true', function() {
+            // Arrange/Act
+            compile();
+
+            // Assert
+            expect(isolateScope.options.addOnBlur).toBe(true);
+        });
+
+        it('sets the option given a static string', function() {
+            // Arrange/Act
+            compile('add-on-blur="false"');
+
+            // Assert
+            expect(isolateScope.options.addOnBlur).toBe(false);
+        });
+
+        it('sets the option given an interpolated string', function() {
+            // Arrange
+            $scope.value = false;
+
+            // Act
+            compile('add-on-blur="{{ value }}"');
+
+            // Assert
+            expect(isolateScope.options.addOnBlur).toBe(false);
+        });
+
+        it('ensures the outermost div element has a tabindex attribute set to -1', function() {
+            // Arrange/Act
+            compile();
+
+            // Assert
+            expect(element.find('div').attr('tabindex')).toBe('-1');
+        });
+
+        describe('option is true', function() {
+            var anotherElement;
+
+            beforeEach(function() {
+                compile('add-on-blur="true"');
+                anotherElement = angular.element('<div></div>');
+
+                $document.find('body')
+                    .append(element)
+                    .append(anotherElement);
+            });
+
+            it('adds a tag when the input field loses focus to any element on the page but the directive itself', function() {
+                // Arrange
+                isolateScope.newTag = 'foo';
+                anotherElement[0].focus();
+
+                // Act
+                getInput().trigger('blur');
+                $timeout.flush();
+
+                // Assert
+                expect($scope.tags).toEqual(['foo']);
+            });
+
+            it('does not add a tag when the input field loses focus to the directive itself', function() {
+                // Arrange
+                isolateScope.newTag = 'foo';
+                element.find('div')[0].focus();
+
+                // Act
+                getInput().trigger('blur');
+                $timeout.flush();
+
+                // Assert
+                expect($scope.tags).toEqual([]);
+            });
+        });
+
+        describe('option is off', function() {
+            it('does not add a new tag when the input field loses focus', function() {
+                // Arrange
+                compile('add-on-blur="false"');
+                isolateScope.newTag = 'foo';
+
+                // Act
+                getInput().trigger('blur');
+
+                // Assert
+                expect($scope.tags).toEqual([]);
+            });
+        });
+    });
+
     describe('placeholder option', function() {
         it('sets the input field placeholder text', function() {
             // Arrange/Act

diff --git a/test/test-page.html b/test/test-page.html
@@ -9,7 +9,8 @@
 <body ng-controller="Ctrl">
   <tags-input ng-model="tags"
               placeholder="{{ placeholder.value }}"
-              replace-spaces-with-dashes="false">
+              replace-spaces-with-dashes="false"
+    add-on-blur="false">
     <auto-complete source="loadItems($query)"
                    debounce-delay="0"
                    min-length="1"
@@ -18,6 +19,8 @@
     </auto-complete>
   </tags-input>
 
+  <input type="text"/>
+
   <script type="text/javascript">
     angular.module('app', ['tags-input'])
         .controller('Ctrl', function($scope, $q) {