How to use PopoverPanel without overflow: auto

[leoschweizer]

I have a use case where I am rendering dropdowns in a floating popover. Currently those dropdowns get clipped by the boundaries of the PopoverPanel, due to the latter having applied an inline style of overflow: auto. But I want them to overflow the Panel (this was previously possible with @headlessui/react v1).

However, due to overriding any user provided styles with the internal styles here:

headlessui/packages/@headlessui-react/src/components/popover/popover.tsx

Lines 945 to 949 in 03c22b4

	style: {
	...theirProps.style,
	...style,
	'--button-width': useElementSize(state.button, true).width,
	} as React.CSSProperties,

... and the internal styles containing a hardcoded overflow: auto here:

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

Line 318 in 03c22b4

overflow: 'auto',

it does not seem to be possible to get rid of it? If I remove the overflow: auto in devtools, everything still seems to work as expected, so I don't see why this would be forced to be there.

Any suggestions how I cloud make this work again?

[leoschweizer]

So, one workaround (when using tailwind) is to apply an override as important:

<PopoverPanel anchor="bottom end" className="!overflow-visible">

Still, that doesn't feel like a clean solution.