@headlessui/react@next set maxHeight on ListboxOptions

[hauptrolle]

Hey,

does anyone has managed to set a maxHeight to the new ListboxOptions component? (@headlessui/react@next).
It get's an inline style of maxHeight which always fills the whole available space. That is quite annoying :(

Any help is appreciated ✌️

[bastianccm]

Seems to be caused by the floating-ui sizeMiddleware:

headlessui/packages/@headlessui-react/src/internal/floating.tsx

Lines 295 to 301 in 043edb8

	sizeMiddleware({
	apply({ availableWidth, availableHeight, elements }) {
	Object.assign(elements.floating.style, {
	maxWidth: `${availableWidth - padding}px`,
	maxHeight: `${availableHeight - padding}px`,
	})
	},

I'm not familiar with floating-ui, but maybe exposing the floating Context might help?

[hauptrolle]

@RobinMalfait Hey 👋 Can we get some feedback on this one?

[ariaspabloi]

You can use the the !important css rule, is not recommend to use but I could not find any other fix.
Using tailwind in react:

 <ListboxOptions className="!max-h-80">