bug: (v5) dropdown displayed in viewport top left corner in Firefox

[notramo]

What version of daisyUI are you using?

v5 preview on Tailwind Play

Which browsers are you seeing the problem on?

Firefox

Reproduction URL

https://play.tailwindcss.com/4ztkH9X6wN?file=css

Describe your issue

Any dropdown button shows the dropdown at the top left corner of the viewport.

[github-actions]

Thank you @notramo for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

[mhadaniya]

I could not reproduce your error, but I could check another issue... mainly because of the space in left side.
If there is no space, for all dropdown depending the direction it should display, it act a little weird.

Peek.2024-12-04.11-27.webm

But I think is not a problem, since it's only a demonstration and when doing a UI, it will be positioned correctly and the behavior works as expected.

[notramo]

@mhadaniya, what browser was used for the screencast? I tried it on latest Firefox.

I noticed that the first few dropdown buttons are working, however, the ones that come after the "no anchor" button in the example are not working. After looking into the code, I found that it's using anchor positioning, which is only supported by most recent versions of Google Chrome at the moment.

[saadeghi]

Dropdown in v5 supports the new HTML Popover API and the new CSS Anchor Positioning module (experimental)

Here's an example:
https://play.tailwindcss.com/F6M7IcIX4J

(Previous dropdown methods such as <details>/<summary> method and CSS hover method are still supported with the same class name)

Popover API + Anchor Positioning are the new way to handle dropdowns and they finally allows us to open/close dropdowns by clicking outside and by clicking the button again (without needing any JS)

• The new Popover API is supported by browsers
• The new Anchor Positioning module is only supported by Chrome for now.

As a progressive enhancement, I show the popover in the middle of page for unsupported browsers (because we can't place it next to the button until those browsers support Anchor Positioning) so it works like a fullscreen popover for now.

Chrome:

FireFox:

[notramo]

It's definitely a better fallback solution for Firefox. Thank you for the quick fix.