Merge cf65fba into bc0f0bd

mbenford · Sep 15, 2014 · 9a1ae3c · 9a1ae3c
2 parents bc0f0bd + cf65fba
commit 9a1ae3c
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 2 deletions.
diff --git a/src/tags-input.js b/src/tags-input.js
@@ -185,14 +185,25 @@ tagsInput.directive('tagsInput', function($timeout, $document, tagsInputConfig)
                 options = scope.options,
                 input = element.find('input'),
                 validationOptions = ['minTags', 'maxTags', 'allowLeftoverText'],
-                setElementValidity;
+                setElementValidity,
+                blurOnTouch,
+                waitForBlur;
 
             setElementValidity = function() {
                 ngModelCtrl.$setValidity('maxTags', scope.tags.length <= options.maxTags);
                 ngModelCtrl.$setValidity('minTags', scope.tags.length >= options.minTags);
                 ngModelCtrl.$setValidity('leftoverText', options.allowLeftoverText ? true : !scope.newTag.text);
             };
 
+
+            blurOnTouch = function(e) {
+                if(!element[0].contains(e.target)) {
+                    if(input[0]) {
+                        input[0].blur();
+                    }
+                }
+            };
+
             events
                 .on('tag-added', scope.onTagAdded)
                 .on('tag-removed', scope.onTagRemoved)
@@ -211,6 +222,9 @@ tagsInput.directive('tagsInput', function($timeout, $document, tagsInputConfig)
                 })
                 .on('input-focus', function() {
                     ngModelCtrl.$setValidity('leftoverText', true);
+
+                    //blur on outside tap when on touch device
+                    $document.on('touchend', blurOnTouch);
                 })
                 .on('input-blur', function() {
                     if (!options.addFromAutocompleteOnly) {
@@ -220,6 +234,7 @@ tagsInput.directive('tagsInput', function($timeout, $document, tagsInputConfig)
 
                         setElementValidity();
                     }
+                    $document.off('touchend', blurOnTouch);
                 })
                 .on('option-change', function(e) {
                     if (validationOptions.indexOf(e.name) !== -1) {
@@ -302,7 +317,7 @@ tagsInput.directive('tagsInput', function($timeout, $document, tagsInputConfig)
                     scope.$apply();
                 })
                 .on('blur', function() {
-                    $timeout(function() {
+                    waitForBlur = $timeout(function() {
                         var activeElement = $document.prop('activeElement'),
                             lostFocusToBrowserWindow = activeElement === input[0],
                             lostFocusToChildElement = element[0].contains(activeElement);
@@ -315,6 +330,7 @@ tagsInput.directive('tagsInput', function($timeout, $document, tagsInputConfig)
                 });
 
             element.find('div').on('click', function() {
+                $timeout.cancel(waitForBlur);
                 input[0].focus();
             });
         }

diff --git a/test/tags-input.spec.js b/test/tags-input.spec.js
@@ -520,6 +520,19 @@ describe('tags-input directive', function() {
                 // Assert
                 expect($scope.tags).toEqual([]);
             });
+
+            // it('adds a tag when the input field loses focus to any element on the page but the directive itself via a tap instead of a click', function() {
+            //     // Arrange
+            //     isolateScope.newTag.text = 'foo';
+            //     getInput().triggerHandler('focus');
+
+            //     // Act
+            //     $document.triggerHandler('touchend');
+            //     $timeout.flush();
+
+            //     // Assert
+            //     expect($scope.tags).toEqual([{ text: 'foo' }]);
+            // });
         });
 
         describe('option is off', function() {