fix(typeahead): close matches popup on click outside typeahead

Closes #231

Author: pkozlowski-opensource

src/typeahead/test/typeahead.spec.js

@@ -144,14 +144,14 @@ describe('typeahead tests', function () {
 
   describe('typeahead', function () {
 
-    var $scope, $compile;
+    var $scope, $compile, $document;
     var changeInputValueTo;
 
-    beforeEach(inject(function (_$rootScope_, _$compile_, $sniffer) {
+    beforeEach(inject(function (_$rootScope_, _$compile_, _$document_, $sniffer) {
       $scope = _$rootScope_;
       $scope.source = ['foo', 'bar', 'baz'];
       $compile = _$compile_;
-
+      $document = _$document_;
       changeInputValueTo = function (element, value) {
         var inputEl = findInput(element);
         inputEl.val(value);
@@ -318,5 +318,21 @@ describe('typeahead tests', function () {
       });
     });
 
+    describe('regressions tests', function () {
+
+      it('issue 231 - closes matches popup on click outside typeahead', function () {
+        var element = prepareInputEl("<div><input ng-model='result' typeahead='item for item in source | filter:$viewValue'></div>");
+        var inputEl = findInput(element);
+
+        changeInputValueTo(element, 'b');
+        var dropdown = findDropDown(element);
+
+        $document.find('body').click();
+        $scope.$digest();
+
+        expect(dropdown).not.toHaveClass('open');
+      });
+    });
+
   });
 });

src/typeahead/typeahead.js

@@ -30,7 +30,7 @@ angular.module('ui.bootstrap.typeahead', [])
 }])
 
   //options - min length
-  .directive('typeahead', ['$compile', '$q', 'typeaheadParser', function ($compile, $q, typeaheadParser) {
+  .directive('typeahead', ['$compile', '$q', '$document', 'typeaheadParser', function ($compile, $q, $document, typeaheadParser) {
 
   var HOT_KEYS = [9, 13, 27, 38, 40];
 
@@ -155,6 +155,11 @@ angular.module('ui.bootstrap.typeahead', [])
         }
       });
 
+      $document.find('body').bind('click', function(){
+        scope.matches = [];
+        scope.$digest();
+      });
+
       var tplElCompiled = $compile("<typeahead-popup matches='matches' active='activeIdx' select='select(activeIdx)' "+
         "query='query'></typeahead-popup>")(scope);
       element.after(tplElCompiled);