[Bug]: MenuButton has no method of scrolling menuitems when the list is long

[crichtonibm]

Package

@carbon/react, @carbon/styles, @carbon/colors, @carbon/icons-react

Browser

Chrome, Safari, Firefox, Edge

Package version

1.54.0

React version

18.2.0

Description

When using a MenuButton, if the number of menuitems exceeds the height of the screen, there is no ability to scroll. The menu does try to place itself so it entirely fits on the screen, but if not, you cannot get to all of the menu items. If I use the scroll wheel of the mouse, it will scroll the page itself, but not the menu. Even when using the arrow keys to move the focus between menu items, the menu itself stays put while the blue selection disappears into the overflow.

Reproduction/example

https://stackblitz.com/edit/github-izkntc

Steps to reproduce

Create a MenuButton with many MenuItems, and try to get to / use the items 'off screen'

Suggested Severity

Severity 2 = User cannot complete task, and/or no workaround within the user experience of a given component.

Application/PAL

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[lee-chase]

Simplest fix would be to allow a class on the popup. Adding max height to it produces a scroll bar.

[alisonjoseph]

Thanks @lee-chase, confirmed that works https://stackblitz.com/edit/github-izkntc-fdlh81?file=src%2Findex.scss

[tay1orjones]

Right now a max-height isn't in the design spec for MenuButton, so I don't think we'll add this as a default behavior right now. Applying max-height via your own styling/classes is the right approach