Search inside dropdown menu has lot of issues

[Rolanddoda]

Describe the bug
There are many issues so I made a video -> https://www.loom.com/share/2e02fc23cd9e4f6db389c7ef6009f965

Codepen/jsFiddle/Codesandbox (required)
https://codepen.io/Roland1993/pen/VwPVVZg?editors=1010

Additional context
All I want to do is to have a search inside the dropdown options popup.
In the original code, I have the search fixed so it doesn't scroll with the options.
As you can see from the video, there is a lot of strange things happening there and my guess it's because of the virtual-scroll. I have made some hacks in my code to fix some issues but still there is a lot of issues there.

What is the best way to implement a search inside dropdown menu for filtering options ?

[metalsadman]

you are doing some custom stuff with the components so don't expect it to work ootb without doing some workarounds. I suggest you look more into qselect examples from the docs along with its api.

ie. using one of the examples from the docs and your data https://codepen.io/metalsadman/pen/eYgbMVV?editors=1010

[Rolanddoda]

Ahh so I have to use @filter in order to make it work and it doesn't work with computed properties to do the filtering. Thanks @metalsadman, I am gonna try it and let you know but it seems that it will work.

[Rolanddoda]

@metalsadman it works great! Thanks.

[metalsadman]

@metalsadman it works great! Thanks.

Cool, please mark your thread as answered, thanks.

[Rolanddoda]

Hi @metalsadman even though the weird issues are solved (Thank you) I noticed that there is still issues in your demo:

1. If you search for an option that doesn't exists (e.g. asdasdsads) the options are not filtered.

2. If you search for an existing option e.g. Cambridge and then you close the modal and open it again, the filtered items are not showing.

3. If you select an option from the dropdown -> close the popup -> open it again the selected item is not showing because it's covered by the search input.

I solved those issues and here is the working example -> Codepen Link

[metalsadman]

good catch.