Menu.Items with max height & keyboard navigation

[barnabasmolnar]

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. 👍

[barnabasmolnar]

Did some quick digging:

https://github.com/tailwindlabs/headlessui/blob/develop/packages/%40headlessui-react/src/components/menu/menu.tsx#L233

Would I be correct in assuming that this is the "offending" (for me, that is) piece of code? This does look rather intentional, though, so I'd be really interested to hear your rationale for this choice. Only if you're willing to share, of course.

If this is intended and is staying that way, would you perhaps consider exposing an API to opt out of this behaviour?

[MrCrayon]

@barnabasmolnar you can see with git blame why preventScroll was set 78ebd3e, but at first glance looks like it could be removed there without affecting that issue.
Maybe you can try it out.

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

The preventScroll is on the actual items not the individual item. We've added those because if you use a Transition around it, and you focus an element, the browser will cancel all transitions and ensure the item that is focused is in view and visible to the user. With this, the transitions work correctly.

Now, when you look at the Listbox component, we have a dedicated scrollIntoView call that ensures that the item is scrolled into view. I'll do the same for the Menu Item component, which should fix this problem.

[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!