Dropdown positioning breakes page scrolling with dropdowns higher than screen height

[adamhaeger]

Version number

1.5.1

Description of the bug

Upon upgrading to 1.5.1 from 1.1.10, we see this behaviour (1.5.1 on the left, 1.1.10 on the right):

We see that in 1.1.10 the Dropdown had position:absolute:

Now it is positioned with translate:

Steps To Reproduce

1. Create a Dropdown with a large list inside, long enough to be longer than the screen height.
2. Try to scroll inside the dropdown

Expected: The entire screen scrolls, allowing you to see the rest of the dropdown content.

Actual: The page will not scroll to show the entire contents of the dropdown. See gid above.

Additional Information

No response

[oddvernes]

Related: #4072

~~This happens because dropdown uses popover now while it did not before. Back then the Dropdown rendered inline and added more height to body so you could scroll.~~ Edit: it is because we used postion: fixed after updating Popover to use native popover api

What you can do:

• ~~Try to add min-height on body when popover is open (something like body:has(:popover-open) {min-height: 150vh}) (depends on the application/context if this makes sense)~~
• add max-height to the dropdown and overflow: auto to make it scroll internally
• override style on dropdown to position: absolute to get back old behavior

What we will consider: disallow popover to be taller than viewport/clip outside viewport internally with floating-ui

[oddvernes]

To add: I see we set position: fixed on popover. If I change this to absolute it will push body height automatically again. So the easiest solution for you is to just override style on dropdown to position: absolute to get back the old behavior 👍

[olemartinorg]

As can be seen in the linked issues/PR, we worked around this by setting a max-height + overflow. For some reason position: absolute caused flickering during my testing, but that may just be on our end.

Not closing the issue in case you're considering doing something about it here.