search

patternfly / patternfly-design

Use this repo to file all new feature or design change requests for the PatternFly project
114 stars 105 forks source link

Bug - Select/Dropdown - Add a scrollbar on expand when the dropdown menu height is limited #1276

Open DaoDaoNoCode opened 9 months ago

DaoDaoNoCode commented 9 months ago

Describe the problem In our product, we have a Select component with over 10 options in it, however, we only have a limited height to show that, so we set maxHeight to something like 350px. When users expand the dropdown, they don't know they can scroll it and they think these are all the options in the dropdown, which could be confusing sometimes.

Screenshot 2023-09-29 at 10 34 48 AM

How do you reproduce the problem? https://codesandbox.io/s/suspicious-worker-rj5zs9 Try to expand the Select, you will see some options, however, there is no indication that there are more options if you scroll down, users will easily think these are all the options they have because they cannot see a scrollbar or a shadow or something at the bottom to tell them this menu is scrollable.

Expected behavior Find an example here https://semantic-ui.com/modules/dropdown.html#multiple-selection. When you expand the dropdown, the scrollbar is always on when the dropdown menu cannot hold all the options.

Is this issue blocking you? No, but it's worth to be addressed because it affects the user experience a little bit.

Screenshots See the description and the code sandbox.

What is your environment?

What is your product and what release date are you targeting? OpenShift AI dashboard - ODH dashboard

Any other information?

deepchauhan2002 commented 9 months ago

Can I work on this issue?

mcoker commented 8 months ago

@DaoDaoNoCode it sounds like this is an issue with how a mac handles scrollbars - it hides them by default, unless you're scrolling. If you set "Show scroll bars" to "Always" in the appearance system settings, that should cause them to behave more intuitively - it will show the scrollbar gutter when there is overflow/scrollable content. Can you confirm if that's the issue?

Screenshot 2023-10-16 at 11 00 21 AM
DaoDaoNoCode commented 8 months ago

@mcoker Hi, yes, this could be a work-around. However, the website (https://semantic-ui.com/modules/dropdown.html#multiple-selection) I shared in the description can always show the scrollbar even I set the settings to When scrolling, do you know what tricks they did? The problem here is we cannot tell all the users of the product to change their system settings in order to get a better UX for the product, there might be some solution that doesn't require any changes from the user's side.

mcoker commented 8 months ago

@DaoDaoNoCode semantic-ui creates their scrollbars manually, I put together a demo here - https://codepen.io/mcoker/pen/MWZMqwW. Though in checking the link you shared in Firefox, looks like they do not style the scrollbars in FF, and possibly other browsers, too.

@andrew-ronaldson @lboehling @mmenestr do you have any thoughts on this?

DaoDaoNoCode commented 8 months ago

@mcoker Thanks! This is very helpful. Could we submit this as a feature request if possible? It will be nice to have a scrollbar when the dropdown menu is longer than the menu height.