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?

Answer 1

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 ie 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.

Answer 2

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.