Deselect last selected item of autocomplete

[Philip]

Dear forum/support,

I'm trying to figure out how to deselect the last item that was selected in my filtered autocomplete list.

To more easily explain the situation I'm facing I edited the example Stackblitz and captured a small video of the issue.

Stackblitz: https://stackblitz.com/edit/angular-9eoskl?file=app%2Fapp.component.ts

You can find the video attached as a ZIP as I couldn't upload the mp4.

The video shows how I auto-select "Volleyball" from the autocomplete values after typing 'volley'. When I type 'ball' I need to have the internal state which item was selected last to be reset inbetween so that I can hit 'Enter' to select 'Baseball'. But instead 'Volleyball' is still selected and pressing 'Enter' will deselect it.

I was hoping that the new focusItemAt method would allow me to do such a thing by calling focusItemAt(null) in an event handler that listens on the autocomplete's 'closed' event. However the focusItemAt method does not really do what I was expecting (still don't know what it really does).

Best regards

Philip

[Stoyan]

Hi Philip,

Thanks for the provided information and StackBlitz demo.

The focusItemAt focuses a specific item given the index of that item. The reason why it doesn't work is that it is executed before the filtering is finished. This being said the focusItemAt can be used when the filter is subscribing to retrieve the filtered values.

Keep in mind that the filter method is an async method, thus the reason why the focusItemAt can be placed in a setTimeout method so that it waits for the filter to be done and then focus the first item it sees in the popup.

I've tweaked the StackBlitz demo that was provided that demonstrates the said above:

https://stackblitz.com/edit/angular-9eoskl-pmtetf?file=app%2Fapp.component.ts

I hope this sheds some light on the matter.

Regards,
Stoyan
Progress Telerik