Not sure why beyond a certain number of items, the items arent showing up in my select input dropdown & also my dropdown cant scroll?
I have binded the options to a collection of about 1000 fonts from Xano.
But when I click on the dropdown, first of all i can’t scroll, and if I click the right scroll bar to force it to go down, the items below a certain number of items dont show up. The search works though.
How to fix so that the fonts show up properly and the dropdown works as intended?
You can see the setting in the first picture under all the binds its Allow to scroll when open. But really I think you should try limit how many you can see at once in some way and kind of force people to use search cause no one really wants to scroll through a 1000 lines in a dropdown.
Hey @Yaj 
I tried to enable the option, I can scroll but then once I reach a certain item, all items below is blank like in the screenshot… any idea how to fix?
I probably could but it’s a lot to explain and I don’t have the time too. The issue is you have the wrong solution for your problem. 1000+ list in a dropdown isn’t something you should be doing.
This seems to be the same issue, that I am experiencing Multiselect element only shows 15 items although there are way more
In both of these threads you have the same answer. It’s not an issue with any elements, its you both are trying to load over 1000 items which just isn’t a viable solution. I don’t think I’ve ever seen a website/app have over 1000 options in a dropdown. What you guys need to look into doing is only pull in like 50 items at a time, then use a search function on the input to then generate some more options that fuzzy match the search value. You do on search → look up in database → where row name is like value and return 50 of those. This example is just trying to go with what you guys already have.
If I was making one for fonts, I’d probably look at making something custom where you have fonts in a repeated group by their first letter (A,B,C) then a user can select a letter which shows a list of all those fonts or a subset of them with pagination. Each option in the repeated group is able to be clicked and then you can have a text value that actually uses the font. This way you could have a clean design that also doesn’t try show too many options at once.
Here’s a rough example of what I mean.
In conclusion there’s lots of options really but unfortunately one of them isn’t listing 1000+ options at the same time. Another option is doing something similar to what they’ve done in google fonts you have a repeated list that has infinite scroll, but what you need to do is only actually pull in say 50 at a time and as you scroll down you update the 50 options to go further down the list. This way you simulate the visuals of an infinite scroll but you only have a subset of items at a time, I’m pretty sure even Google wouldn’t be loading all their 1800 fonts all at once on the fonts page. I’d look into another solution cause unless you want to try make you’re own custom dropdown that can do what you want, I doubt weweb elements are ever going to provide the solution you want. They’ve pretty much said as much in the other post.
If infinite scrolling was correctly added to the new select and multiselect items there should not be any technical reason that the dropdown could not have a lot of items. 1000 items does not necessarily represent a lot of data to load. Yes, a 1000 items is a lot to load in the DOM at one time but that is what infinite loading is supposed to solve - you only load what is currently visible. So I believe this would be a bug in the new elements.
Then, outside of technical reasons then maybe there are UX reasons. But here we are presented with a select and multiselect with a search built in. Why not allow a lot of items.
I was able to replicate this bug when loading 1001 items. 1000 items worked fine, without any problem.
For your scroll problem you have to enable “Allow scrolling when open” option on the select/multiselect + you need to restrict the height of the options list, so you get a scrollable window.
Are you using supabase? It’s probably the limit by Supabase in this instance then and not a weweb issue at all. Supabase has a default limit of 1000 rows returned.
I probaly wasn’t clear enough I wasn’t saying you technically can’t do it, I’m saying you shouldn’t do it, I’d hate to use a dropdown with 1000+ options as a user. Just cause you can do something doesn’t mean you should.
No, I actually set a temporary limit in supabase to 5000 items in this instance just for testing. You can configure the max number of items supabase returns under “API settings” in supabase.
Maybe is a weweb issue then. But this type of design choice is a reason why you see so many posts about memory crashes. I’m not 100% sure how weweb manages their inifinite scrolling lazy loading, but stuff like this can and most likely will cause issues with to much memory on pages that have lots of other things going on. Up to you guys but I’d stay well away from huge dropdown lists like this for a huge variety of reasons, lots of cons and very little pros to it.
