[Bug]: MenuButton has no method of scrolling menuitems when the list is long
crichtonibm opened this issue · comments
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
Simplest fix would be to allow a class on the popup. Adding max height to it produces a scroll bar.
Thanks @lee-chase, confirmed that works https://stackblitz.com/edit/github-izkntc-fdlh81?file=src%2Findex.scss