fix(autocomplete): Close suggestion list when input loses focus

Suggestion list remains visible when the input loses focus and addOnBlur
option is off, thus allowing the user to select a suggestion, which in
turn causes a digest error to occur. Trigger an "input-blur" event when
appropriate so the autocomplete directive can close the suggestion list.

Closes #52.

src/auto-complete.js

@@ -214,6 +214,9 @@ tagsInput.directive('autoComplete', function($document, $timeout, $sce, tiConfig
  scope.$apply();
  }
  }
+ })
+ .on('input-blur', function() {
+ suggestionList.reset();
  });
 
  $document.on('click', function() {

src/tags-input.js

@@ -58,8 +58,7 @@ tagsInput.directive('tagsInput', function($timeout, $document, tiConfiguration)
  transclude: true,
  templateUrl: 'ngTagsInput/tags-input.html',
  controller: function($scope, $attrs, $element) {
- var events = new SimplePubSub(),
- shouldRemoveLastTag;
+ var shouldRemoveLastTag;
 
  tiConfiguration.load($scope, $attrs, {
  customClass: { type: String, defaultValue: '' },
@@ -77,8 +76,10 @@ tagsInput.directive('tagsInput', function($timeout, $document, tiConfiguration)
  enableEditingLastTag: { type: Boolean, defaultValue: false }
  });
 
- events.on('tag-added', $scope.onTagAdded);
- events.on('tag-removed', $scope.onTagRemoved);
+ $scope.events = new SimplePubSub();
+
+ $scope.events.on('tag-added', $scope.onTagAdded);
+ $scope.events.on('tag-removed', $scope.onTagRemoved);
 
  $scope.newTag = '';
  $scope.tags = $scope.tags || [];
@@ -96,11 +97,11 @@ tagsInput.directive('tagsInput', function($timeout, $document, tiConfiguration)
  if ($scope.tags.indexOf(tag) === -1) {
  $scope.tags.push(tag);
 
- events.trigger('tag-added', { $tag: tag });
+ $scope.events.trigger('tag-added', { $tag: tag });
  }
 
  $scope.newTag = '';
- events.trigger('input-changed', '');
+ $scope.events.trigger('input-changed', '');
  changed = true;
  }
  return changed;
@@ -130,7 +131,7 @@ tagsInput.directive('tagsInput', function($timeout, $document, tiConfiguration)
 
  $scope.remove = function(index) {
  var removedTag = $scope.tags.splice(index, 1)[0];
- events.trigger('tag-removed', { $tag: removedTag });
+ $scope.events.trigger('tag-removed', { $tag: removedTag });
  return removedTag;
  };
 
@@ -146,11 +147,11 @@ tagsInput.directive('tagsInput', function($timeout, $document, tiConfiguration)
  this.registerAutocomplete = function() {
  var input = $element.find('input');
  input.on('keydown', function(e) {
- events.trigger('input-keydown', e);
+ $scope.events.trigger('input-keydown', e);
  });
 
  $scope.newTagChange = function() {
- events.trigger('input-changed', $scope.newTag);
+ $scope.events.trigger('input-changed', $scope.newTag);
  };
 
  return {
@@ -165,7 +166,7 @@ tagsInput.directive('tagsInput', function($timeout, $document, tiConfiguration)
  return $scope.tags;
  },
  on: function(name, handler) {
- events.on(name, handler);
+ $scope.events.on(name, handler);
  return this;
  }
  };
@@ -223,6 +224,7 @@ tagsInput.directive('tagsInput', function($timeout, $document, tiConfiguration)
  if (scope.options.addOnBlur) {
  scope.tryAdd();
  }
+ scope.events.trigger('input-blur');
  scope.$apply();
  }
  }, 0, false);

test/auto-complete.spec.js

@@ -188,6 +188,17 @@ describe('autocomplete-directive', function() {
  expect(isSuggestionsBoxVisible()).toBe(false);
  });
 
+ it('hides the suggestion box when the input field loses focus', function() {
+ // Arrange
+ suggestionList.visible = true;
+
+ // Act
+ eventHandlers['input-blur']();
+
+ // Assert
+ expect(isSuggestionsBoxVisible()).toBe(false);
+ });
+
  it('adds the selected suggestion when the enter key is pressed and the suggestions box is visible', function() {
  // Arrange
  loadSuggestions(['Item1', 'Item2']);