Typeahead has document click handler even when autocomplete not in use

Bug description:

For every typeahead you have on a page, there is a document click handler which handles dismissing a popup. This event is always bound regardless of if the input has focus, or a typeahead popup is open.

This means every time a user clicks a page, the dismissPopup function is going to run for each typeahead on the screen.

We could change to something like this which we subscribe/unsubscribe to when needed.

private documentClickObservable = Observable.fromEvent(document, 'click');
private documentClickSubscription: Subscription;

When you subscribe to the observable, the callback will fire only until you unsubscribe, in which case it will lie dormant.

We could subscribe when a popup is opened, and unsubscribe when it is closed.

I can put out a PR for this, I wanted to hear people’s thoughts first.

Link to minimally-working plunker that reproduces the issue:

This can be found by putting a breakpoint in the dismissPopup function in the demo, and clicking around on the page.

Version of Angular, ng-bootstrap, and Bootstrap:

Angular: 4.0.1

ng-bootstrap: 1.0.0-alpha.22

Bootstrap: 4.0.0-alpha.6

[wesleycho]

IMO the first solution is much better - it avoids being opinionated by introducing HTML/CSS into the mix, would could lead to problems if users have particular UX needs.

I think that Angular should provide this feature in core itself (https://github.com/angular/angular/issues/15905), but I don’t think we can wait for Angular to implement this - it may be better for us to implement a version specific to our purposes and remove it in favor of Angular’s version down the line.

[wKoza]

So @wesleycho , @pkozlowski-opensource , what can we do ?

• subscribe / unsubscribe , for each widget, on the open / close state with a code like this :

private _openPopup() { 
this.removeListenerClickonDocument = this._renderer.listen('document', 'click', this.dismissPopup.bind(this)); 
}

 private _closePopup() {
this.removeListenerClickonDocument();
}

• Create a service for this (but I’m confused about using the Renderer in a service.

?