feat(tagsInput): Enable ngFocus and ngBlur native directives

This adjustment makes sure the outer (directive) element is focussed when the input field receives focus, and blurred when the input field loses focus. That way, Angular's native ng-focus and ng-blur can be used on the directive element. Relates to #182
mbenford · Dec 1, 2014 · 210b86f · 210b86f
1 parent 003e678
commit 210b86f
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 0 deletions.
diff --git a/src/tags-input.js b/src/tags-input.js
@@ -210,9 +210,17 @@ tagsInput.directive('tagsInput', function($timeout, $document, tagsInputConfig)
                     scope.newTag.invalid = null;
                 })
                 .on('input-focus', function() {
+
+                    // focus outer element
+                    element.triggerHandler('focus');
+
                     ngModelCtrl.$setValidity('leftoverText', true);
                 })
                 .on('input-blur', function() {
+
+                    // blur outer element
+                    element.triggerHandler('blur');
+
                     if (!options.addFromAutocompleteOnly) {
                         if (options.addOnBlur) {
                             tagList.addText(scope.newTag.text);

diff --git a/test/tags-input.spec.js b/test/tags-input.spec.js
@@ -338,6 +338,34 @@ describe('tags-input directive', function() {
             // Assert
             expect($scope.$digest).not.toHaveBeenCalled();
         });
+
+        it('focuses the directive element when the input field receives focus', function() {
+            // Arrange
+            $scope.callback = jasmine.createSpy();
+            compile('ng-focus="callback()"');
+            var input = getInput()[0];
+
+            // Act
+            getInput().triggerHandler('focus');
+            $timeout.flush();
+
+            // Assert
+            expect($scope.callback).toHaveBeenCalled();
+        });
+
+        it('blurs the directive element when the input field loses focus', function() {
+            // Arrange
+            $scope.callback = jasmine.createSpy();
+            compile('ng-blur="callback()"');
+            var input = getInput()[0];
+
+            // Act
+            getInput().triggerHandler('blur');
+            $timeout.flush();
+
+            // Assert
+            expect($scope.callback).toHaveBeenCalled();
+        });
     });
 
     describe('tabindex option', function() {