Filterable WSDropdown with many items lacks UX clue for number of elements about components HOT 12 OPEN

Is there any way to make this menu work like an "endless scroll" to fetch more and more items as the user scrolls? And still be reasonably smooth

from components.

@myueksel Can you please look into this? Lucas has a great point about the usability of the Dropdown.

from components.

Any suggestion about this from @wholesale-design-system/ux ?

I would say:

1. We could make this scrollable with the default OS scrollbar
2. We could create a own scrollbar which uses javascript but looks everywhere the same
3. We could show no scollbar but let the user scroll
4. We could show a link with "show more" which shows the next x items

I totally would propose the 4th solution for the reason that it is much more performant because we only have to render 10 items instead of 5000 (for instance on sub units). So on click we would show another 10 items and the dropdown gets larger instead of a scrollbar.

from components.

Thanks for the proposal, @fragsalat. I'm skeptical about the 4th solution for two reasons:

1. It is fairly unusual
2. The size of the box will grow each time I click, and at some point it becomes bigger than the screen

In order of my preferences, I would vote no. 2, then no. 1. Maybe start with 1 and see how ugly it looks?

Thanks!

from components.

@schluchter this is the worst performance wise. Just remember that we have like 7000 brands, 4500 suppliers, and some units and so on. To render all of those is not performant and no one want's to scroll those. It probably is an edge case that a user wants to see more.

To make a compromise I would suggest a combination. A link at the bottom which is about "show all" and if the user clicks it becomes scrollable. So we have a good initial performance but the user still can see all

from components.

Just bear in mind that my comment was about the filterable dropdown specifically: if the list is too big, it's OK "scroll-wise" because people would probably type in the text field anyway. The point was more like: there is no indication whatsoever that there are more than 9 elements (in my example) in the list.

The "show all" idea sounds good 👍

from components.

For short and medium lists: I agree with @schluchter, scrolling is the most natural and expected behavior.

For longer lists: do we really need to render everything? Can't we just render ex. 50 and then automatically render more during scrolling (like auto "show more" button)?

Another thing is the question, how many people would go through the list of thousands elements instead of typing a name? My guess is - no one (sane). IMO showing limited list (50? 100?) before you type anything should not cause any real user problem.

About scrolling we need scrolling element anyway and standard scrolls looks ugly (I have seen it!).

from components.

Instead of "click for more" or visible scrollbar, maybe different hint for "there's more down here" could be used, for example a double downward arrow, that also possibly moves a bit.

Something like this (sorry huge image): https://maxcdn.icons8.com/Share/icon/p1em/Arrows//double_down1600.png

from components.

@fabric-design/ux any news here? I would like to implement it right now

from components.

Someone just asked here "why there is no scrollbar or something in that dropdown?" :-)
Any news?

from components.

No ux decision taken yet.
I suggested multiple possibilities.

from components.

My 'everyday internet apps user' persepctive: if there are more elements, there should defnitely be a visual cue (like the arrow suggested by @jseb). But then if there's a visual cue saying that the list is longer than what I see, I do expect it to be scrollable. Regardless if the loading is on-demand (better) or loading everything when the list renders (noooo), I would try to scroll it definitely, maybe realize there are too many elements and then use the smart filter.

from components.