Virtualize options to gain performance on big option lists

[mseele]

Using multiselect with very big lists of options (3000+) the performance is very slow because all options are rendered in the options list instantly.

A virtualization of the option list would be a great thing. Only render the first n options and add more if needed (on scrolling or for search).
Vuetify has a very smart concept for this, imho:
They use a variable lastItem (could be defined by a prop to make the virtualization completely optional) that they modify on key clicks and on scroll (if needed).

Please search for lastItem in https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VSelect/VSelect.ts

[stale]

Hi 👋 this issue has been automatically marked as stale 📌 because it has not had recent activity 😴. It will be closed if no further activity occurs.

[stale]

Hi again 👋 we would like to inform you that this issue has been automatically closed 🔒 because it had not recent activity during the stale period.

[stevebauman]

Definitely agree with this. I'm having pretty rough performance issues with only 100+ options. Not sure what I can do to make it faster...

[stevebauman]

Update: Performance seems to only be a problem when compiling in dev or hot mode (I'm using Laravel Mix). When I run npm run prod, performance is fine (at least for my 100-200 option selection) 👍 . False alarm.

[adamberecz]

Added infinite scroll in 2.4.0. Here's an example:
https://github.com/vueform/multiselect#load-async-options-from-api-on-open-with-infinite-scroll