I use the multiselect element and populate it with a collection - a Supabase table. The table contains about 1400 records - I don’t use pagination or filtering when loading the collection. However, the multiselect element only shows 15 items. As you can see on the screenshot, the remaining part of the options list is blank. Even though I can search for any item by activating the search function in the multiselect - is this a bug?
How can I make sure to display all available items in the multiselect options list?
Hi Julian!
Loading 1400 items at once is not good practice as it will possibly breaks browser performance, please have a look on our documentation about the element here
Hi @rivan_sigarlaki,
thanks for your answer, but the linked article refers to the deprecated multiselect element, which had an infinite scroll feature (I assume this is what you meant to point me to) - however, there is no infinite scroll option in the current multiselect element, so how can this be implemented?
So I wonder if this has something to do with there being no built-in scroll function on multiselect? I had to have the AI custom code me a CSS function to build in scrolling. As you said, it’s there if you search for it, you just can’t scroll.
I went to go do a video of the multiselect I’d set up a scroll function in to demonstrate what I’d done, but turns out I’d deleted it in favour of another option and I’m out of AI credits until the end of the month so I can’t recreate it lol. If it’s still not resolved by the 29th I’ll test and see if it does work and post then.
Thanks Agustin.
Hi @julian the new select element has the infinite scroll by default. So the issue comes down to loading too many options which the browser can’t handle.
Btw, the difference with the old-select is you cannot have custom display in the new select element. But, you can fork it if you want
Hi @rivan_sigarlaki,
thanks for your answer. I don’t fully understand it yet though: so the select element has infinite scroll by default, but it does not scroll infinitely, because there are too many items? So how can this issue then be solved? (the old select element with infinite scroll didn’t have any issues with this amount of items, by the way).
Also, I’m not the only one with this problem apparently Why values dont show up in select dropdown field and cannot scroll?
I would really appreciate if you could explain how the infinite scroll feature in the new select element works and how my problem can be solved. Thanks a lot!
Hey, you are right. After delve into it, an improvement is needed in the new Select element: the infinity scroll should behave like the Datagrid element.
For now, loading 1000+ options in (old or new) Select is not good ⎯ 1000 is ok, you may need to adjust the buffer value of the new select element for it in its setting panel.
If Search is enabled in the new Select, it filters and works fine.
Old Select still gets laggy for 1000+ options, even after infinity scroll is On.
Rest assured, it is in the log for imrpovement
Thank you for pointing the matter, Cheers!
