Typeahead: close on mouseclick outside of popup

[Gregy]

Hi,
original typehead http://twitter.github.com/bootstrap/javascript.html#typeahead closes if you click outside of it.
Angular typeahead: http://angular-ui.github.com/bootstrap/#/typeahead stays open.

Is it a bug or a feature? :) If it is a feature could it be an optional one?

Thank you

[pkozlowski-opensource]

Let's call is discrepancy :-) Good catch @Gregy!

To be fixed

[Gregy]

Great thanks :-)

[Mohamad-Abdulah]

close typeahead popup onBlur when no selection typeahead-focus-first="false"
my html " "

[almeidap]

Same problem here as @Mohamad-Abdulah when using typeahead-focus-first="false". Looks like the issue only arises after Typeahead has been unloaded once (due to $document.unbind I suppose, see https://github.com/angular-ui/bootstrap/blob/0.13.4/src/typeahead/typeahead.js#L426).

For those still stuck on version 0.13.x (even if this may apply to more recent versions), here is a possible fix:

(function () {
    'use strict';

    angular.module('MyApp')
    /**
     * AngularUI Typeahead extensions & fixes.
     */
    .directive('typeahead', function () {
        return {
            restrict: 'A',
            priority: 1000, // Let's ensure AngularUI Typeahead directive gets initialized first!
            link: function (scope, element, attrs) {
                /**
                 * Extend AngularUI Typeahead to ensure that dropdown menu gets closed when clicking
                 * outside Typeahead input.
                 * NOTE: This issue only arises when `typeahead-focus-first="false"`.
                 *
                 * See: https://github.com/angular-ui/bootstrap/issues/231
                 *
                 * FIXME: remove with AngularUI 1+ (probably)
                 */
                // Do not use $document, as it looks like handlers cannot be attached twice!
                var body = $('body').on('click.typeahead.extensions', function(evt) {
                    // Issue #3973
                    // Firefox treats right click as a click on document
                    if (element[0] !== evt.target && evt.which !== 3) {
                        scope.$broadcast('TypeaheadCloseRequested');
                    }
                });

                element.on('$destroy', function() {
                    body.off('click.typeahead.extensions');
                });
            }
        };
    }).directive('typeaheadPopup', function ($rootScope) {
        return {
            restrict: 'EA',
            link: function (scope, element, attrs) {
                var unregisterFn = scope.$on('TypeaheadCloseRequested', function (event) {
                    if (scope.matches.length !== 0) {
                        scope.matches.length = 0;
                        if (!$rootScope.$$phase) {
                            scope.$digest();
                        }
                    }
                });

                // Ensure listener is unregistered when $destroy event is fired:
                scope.$on('$destroy', unregisterFn);
            }
        };
    });
}());