Ngx-Bootstrap Typeahead retaining dropdown values on input clear

Question

I've recently upgraded the ngx-bootstrap from 1.8.1 to 3.0.1 . After the upgrade type ahead doesn't seem to work as expected. I'm using this example : https://valor-software.com/ngx-bootstrap/#/typeahead#async-data

with [typeaheadMinLength]="3"

Now , if I search, lets say "abcdef" then it starts searching after 3 characters have been typed that is abc and then abcd, abcde, abcdef and so on which is fine.

But now if I delete everything in input textbox using backspace in one go, that is if I make abcdef to empty by pressing backspace in one go, then once input is empty, it shows drop down values again which correspond to min length which is abc.

Ideally it should clear drop down values but looks like when you delete it very fast using backspace, it retains the values corresponding to min length token string.

It is more visible when data is fetched from a service and the data is huge, so it takes some time to load and clear.

Delay in service response can be emulated using typeaheadWaitMs and this issue can be replicated using this example : https://valor-software.com/ngx-bootstrap/#/typeahead#delay

https://github.com/valor-software/ngx-bootstrap/issues/4412

Could someone please help on this?

Shrivats · Accepted Answer · 2018-06-26 09:12:57Z

0

You have to put a check if search field is empty then clear the list holding values. When pressing backspace what happens is that when search length reaches threshold value i.e abc it fetches the result and stores it after that no operation is performed hence the search results for abc are persisted. Add (keyup)="onKey($event.target.value)" if value is empty clear the list holding your dropdown data.

answered Jun 26, 2018 at 9:12

Shrivats

537 bronze badges

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

1 Comment

p4ulinux Over a year ago

this isn't simple as it sounds, this question is specific to ngx-bootstrap implementation of typeahead data source is defined like this : this.dataSource = Observable.create((observer: any) => { // Runs on every search observer.next(this.asyncSelected); }) .pipe( mergeMap((token: string) => this.getStatesAsObservable(token)) ); } you can't just clear data source as it is not a list instead it is an observable, can you show how it can be done using above code? or using below example valor-software.com/ngx-bootstrap/#/typeahead#delay

p4ulinux · Accepted Answer · 2018-07-09 13:50:53Z

0

As a workaround, I removed [typeaheadMinLength]="3" and instead checked the length on server. If length of prefix token is less than 3 , server doesn't do anything and instead returns empty array. This isn't the optimal solution ofcourse because even for length less than 3, requests will go to the server.

Although, I didn't feel any visible performance impact but still it could be better if done on UI rather than server.

answered Jul 9, 2018 at 13:50

p4ulinux

3395 silver badges14 bronze badges

Collectives™ on Stack Overflow

Ngx-Bootstrap Typeahead retaining dropdown values on input clear

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related