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

Just tested some more and if I downgrade to version 4.2.0 of ngx-bootstrap the issue goes away... damn! — ChrisH
– ChrisH, Commented Dec 12, 2019 at 13:41
I am having the same issue and I am now on v5.3.2 are there any ways to overcome this? — iamkristher
– iamkristher, Commented Jan 30, 2020 at 7:15
I am also having this issue, but it is extremely intermittent. I cannot actually replicate it in the development or production environment myself, but I have videos from clients showing the issue. I attempted subscribing to the observable separately and running an explicit ChangeDetectorRef.detectChanges() but that has apparently not solved the problem. — knsheely
– knsheely, Commented Feb 3, 2020 at 20:34
@ChrisH Have you been able to replicate this issue consistently? Any chance you could put up a Stack Blitz? — knsheely
– knsheely, Commented Feb 7, 2020 at 0:57

Louay Al-osh · Accepted Answer · 2019-12-12 11:54:36Z

0

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.

answered Dec 12, 2019 at 11:54

Louay Al-osh

3,43721 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ChrisH Over a year ago

I thought about that, but in the ngx-bootstrap documentation it states that you can pass an observable.

Collectives™ on Stack Overflow

ngx-bootstrap typeahead change detection issue

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related