Catalyst z-index issues with button and dropdown components

[KitsonBroadhurst]

What component (if applicable)

• URL for category: https://catalyst.tailwindui.com/docs/dropdown
• Component name: Dropdown / Button

Describe the bug The default Button has a higher z-index than the default Dropdown component. When the dropdown is opened, the button will show above the menu list.

To Reproduce

• Add a Dropdown component and a Button component below it.
• Open the dropdown list and the button will be visible above the item list rendered by the Dropdown

Expected behavior By default the Dropdown menu list should be above the default Button component.

Screenshots

Additional context There is a release issue raised a while back before the Catalyst lib was created: https://github.com/tailwindlabs/tailwindui-issues/issues/1250

Adding z-10 to the DropdownMenu component solves this for me so isn't a hard fix, but the defaults should be sensible for everyone. I edited line 67 of components/dropdown.tsx:

// Base styles
'isolate z-10 w-max rounded-xl p-1',

[adamwathan]

Hey! I'm unable to reproduce this, the dropdown panel appears over the button for me:

https://github.com/tailwindlabs/tailwindui-issues/assets/4323180/498d3470-fc0e-463e-96f3-cbd131ec3a54

Dropdown panels are rendered in portals at the end of the body, and buttons have no z-index on them by default in Catalyst, so is there a chance this is something you've customized in your project or the result of adding your own z-index to something? We very deliberately designed Catalyst to work properly without mucking around with z-index stuff.

If you're not doing it already, I highly recommend adding isolate to your main application container in your React project, which will make sure none of the z-indexed elements on your page interfere with elements in portals like dropdown panels.

Here's what I mean:

[KitsonBroadhurst]

I misread the negative z-index in the button component as some kind of positive value. I've kept the catalyst defaults so I can keep them up to date as more improvements/components are made.

However, you are absolutely right about the cause, I had a stray z-index change elsewhere which was ultimately messing with the order.

Adding isolate to the main application container does the trick and I can return my Dropdown component back to the original 😅, thanks for the tip.