fix(typeahead): typeahead focus obtained again after leaving the control

[diegofal]

I am experiencing the following issue:

• I setup the control in the following way. Async call is done to an API, which hits an external resource. This operation takes, at least, 1 second.

  <input class="form-control"
  name="searchForm"
  required
  #searchForm="ngModel"
  [(ngModel)]="searchModel"
  [typeahead]="searchResults"
  (typeaheadOnSelect)="selectFromSearchResult($event)"
  typeaheadOptionField="fullName"
  typeaheadWaitMs="200"
  (keypress)="loading=true"
  size="30" type="text" />

Component code is as follows:

this.searchResults = Observable.create((observer:any) => {
this.loading = true;
this.contactsService.search(this.searchModel)
.subscribe((result: any) => {
this.loading = false;
observer.next(JSON.parse(result._body));
})
});

• Upon typing, after 200ms a request is executed.
• I hit tab before the response comes back, so focus is now in another control.
• After the results come back from the server, typeahead control obtains focus again. This is not an expected behaviour.

Q: is there a way to cancel the request?
Q: shouldn't the control cancel the request on focus lost?

Thank you in advance!

[jvanrossum]

+1
We are also experiencing issues caused by this behaviour

[Hadev-JHH]

We have run into this issue as well. It results in some very funny behaviour when you have 2 typeaheads next to eachother where they keep stealing focus from eachother

Looking at the code it seems to come from:

1. The fact that the async actions are finalized regardless of focus state
2. The fact that finalizeAsyncActions calls show() regardless of focus state
3. The fact that show() calls focus() on the input element

[lalocespedes]

Here is a issue example in stackblitz. Typeahead dont stop when lost focus.

https://stackblitz.com/edit/angular-ngx-typeahead

Help please,