ngx-bootstrap typeahead change detection issue

Question

Really strange issue: we had the ngx-bootstrap typeahead working for a long time, recently we've experienced behaviour where the drop down options are not shown until you click the mouse (can be anywhere on the page)

The typeahead is bound to an API (HttpClient) and the typeahead loading event shows that it's finished but no results are shown until you click somewhere.

    <input [(ngModel)]="asyncSelected"
           [typeaheadAsync]="true"
           [typeahead]="departureAirports"
           (typeaheadLoading)="changeTypeaheadLoading($event)"
           (typeaheadOnSelect)="typeaheadOnSelect($event)"
           [typeaheadOptionsLimit]="7"
           typeaheadOptionField="name"
           [typeaheadMinLength]="3"
           placeholder="Locations loaded with timeout"
           class="form-control">
    <div *ngIf="typeaheadLoading">Loading</div>

this.departureAirports = this.getAirports('departure');

public getAirports(direction: string): Observable<Airport[]> {

 const url = 'xxxxxx';
 return this.httpClient.get(url).pipe(take(1), map((response: AirportsResponse) => response.Options ))
}

If I replace the httpClient with an array wrapped in an observable (using of) there is no issue.

We're using angular 8.2.14 with rxjs 6.5.3

Answer 1

To be hones with you, I didn't found any mistake except one. I'm gonna show it but I feel strange that if you replace the httpClient by rxjs of([ some array ]) would work find...

The one thing that should be change I think is the way you pass the observable in your html template, while it's an observable that return a value(array) and not an array in itself it should be passed with the async pipe in mind like

           [typeahead]="departureAirports | async"

which will cause the observable to be resolved and get the result of it passed to the input. Hope this can help.