Menu.Items with max height & keyboard navigation

Hello there,

For a bit of context, we’re using the Menu component as a dropdown to list a number of projects for our users to choose from. The number of projects is entirely dynamic and variable, so they might have a choice between 3 projects or 30.

A simple way to tackle this would be to apply a max-height value and an overflow-y: auto to the Menu.Items component. This works very well when using the mouse to navigate the dropdown, I can easily scroll up & down in the container. However, when using the keyboard - ie tabbing to Menu.Button and pressing space or enter to open the dropdown and then using the up/down arrow keys - it turns out that the arrow keys themselves “don’t scroll the container”. So once you reach an item that is below the visible part of the container, you don’t actually see your selection as the scrollbar remains unmoved.

Is this a bug, a “missing” feature or am I abusing the component here a little?

I’ve checked the ListBox component example, which works perfectly with the up/down arrows in constrained height containers.

My gut feeling would be that Menu should work much in the same way in this regard, though I’m of course open to changing my mind if this is a conscious design choice.

Would appreciate your thoughts here.

PS, awesome work on the library guys, thank you for all your hard work. Can’t wait to see even more components. 👍

[RobinMalfait]

This should be fixed, and will be available in the next release. You can already try it using npm install @headlessui/react@dev or yarn add @headlessui/react@dev.

[barnabasmolnar]

Awesome Robin, cheers!