You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When a Menu is used with a fixed height or maxHeight to avoid a large MenuList, and trying to navigate with the keyboards (arrow down, arrow up, or open the menu with space/enter) the scroll of the menu is not following the focused item, creating a problem for accessibility with keyboard. The issue is caused in the useMenu hook and the preventScroll: true from useUpdateEffect hook
In the sandbox, tab and set focus on the MenuButton element
Open the Menu with arrow up, arrow down, Space or Enter
The scrollbar of the menu is not following the active index. Below there is a container with focusable elements with the expected behaviour.
Chakra UI Version
2.8.2
Browser
123
Operating System
macOS
Windows
Linux
Additional Information
Setting the preventScroll: false will fix the issue and considering that the menu could be used as a dropdown/selector (to have more flexibility and styles) I think would be a great improvement.
The text was updated successfully, but these errors were encountered:
Description
When a Menu is used with a fixed
height
ormaxHeight
to avoid a largeMenuList
, and trying to navigate with the keyboards (arrow down, arrow up, or open the menu with space/enter) the scroll of the menu is not following the focused item, creating a problem for accessibility with keyboard. The issue is caused in theuseMenu
hook and thepreventScroll: true
fromuseUpdateEffect
hookLink to Reproduction
https://codesandbox.io/p/sandbox/busy-http-48t8rw?file=%2Fsrc%2Findex.tsx%3A22%2C20
Steps to reproduce
MenuButton
elementSpace
orEnter
Chakra UI Version
2.8.2
Browser
123
Operating System
Additional Information
Setting the
preventScroll: false
will fix the issue and considering that the menu could be used as a dropdown/selector (to have more flexibility and styles) I think would be a great improvement.The text was updated successfully, but these errors were encountered: