ActionMenu overflow when there are too many ActionList items

[lowply]

Description

Summary

As shown in the following screen recording, ActionMenu overflows when there are too many ActionList items and blocks users from selecting items in the hidden part of the list.

Screen.Recording.2023-07-05.at.14.49.41.mov

In the regular HTML select element this doesn't happen because the menu renders over the browser window. ActionMenu is, OTOH, a React component which cannot be rendered over the browser window. To mitigate this issue, there should be a scroll bar on the right side of the list so users can view and select all items regardless of the number of the items in the list.

This was originally reported in https://github.com/github/helphub/issues/4215.

Steps to reproduce

See https://ghe.io/lowply/action-menu-example/blob/main/src/ActionMenuComponent.tsx

Version

v35.26.0

Browser

Safari

[amareshvarma]

I would like to work upon this issue

[amareshvarma]

@lowply The steps to reproduce is redirecting to github enterprise, can we have to available with out redirecting to github enterprise

[siddharthkp]

Hi @lowply, How do you feel about using SelectPanel instead? It has better UX (like search) for long lists

[lowply]

@amareshvarma Can you see this? https://lowply-org.github.io/action-menu/

@siddharthkp Thanks for the idea! TIL about SelectPanel and I like its scroll UI and filtering functionality. However in our use-case we can't have the selectable items - we need our users to jump to a certain URL when they click an item in the pull-down menu.

[lesliecdubs]

@lowply can you share any more information about how you're using the ActionMenu, and what you would expect for this experience to be for a user utilizing assistive technology like a screenreader?

If it's a long list of items, we were wondering how you were thinking about making sure the UX of selecting an item was not too much trouble.

[lowply]

@lesliecdubs Hi 👋🏻 Please see https://github.com/github/helphub/issues/4215 for more context about this issue. Feel free to ping me on Slack if you have any other questions!

[lesliecdubs]

Thanks @lowply. I know we temporarily resolved this with a native <select>.

In the meantime, I'm going to move this over for discussion in the Primer Patterns working group as there doesn't seem to be a great solution for a really long list of selection items that, when selected, should direct to a specific URL. Hopefully we'll get some ideas from there!

[mperrotti]

I'm wondering if a SelectPanel would make more sense for this use-case. The filtering behavior would make it easier to select from a long list of options.

Either way, I think that the height of our overlays should max out at the height of the viewport and then scroll vertically within the overlay. @lesliecdubs - should we create a Primer React issue to support that behavior?