Combobox has weird overlap when having multiple comboboxes using headlessui example code.

[namrog84]

I am using the example here
https://headlessui.com/react/combobox

What package within Headless UI are you using?
"@headlessui/react": "^1.7.4",

What browser are you using?
Chrome

Reproduction URL

It's literally just the headlessui.com copy/pasted in a few orders

I just copy pasted the code from here
https://headlessui.com/react/combobox

and removed fixed from the top lvl div in the example

Then go do something like this somewhere

<div>
<Example  />
<Example  />
<Example  />
</div>

If you have a good site suggestion that I can use to repro it, I can copy/paste it there too.

Describe your issue

There is bad overlap of multiple comboboxes with the code given in the example.
before clicking

https://i.imgur.com/VGBd4WP.png

Notice you can still see the other 2 Examples in front of the dropdown of the first one.
https://i.imgur.com/6TVXmHm.png

[namrog84]

sample code here with my changes

https://gist.github.com/namrog84/7b3d7c4e45b6b8c398156645b8fc5e70

Not sure if this will work but https://codesandbox.io/s/practical-hooks-zdz3fc?file=/src/App.tsx:0-11954

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

Looks like you have some z-index related issues. Here is an updated version: https://codesandbox.io/s/adoring-fire-2ijw8n?file=/src/App.tsx

The idea is to have your wrapper div around the button to be relative z-0 and the div for your options to be absolute z-10 that way the options are always on top of the button.

[namrog84]

Thank you lots! I was playing around z-stuff and I couldn't get it to work. Thanks a ton!

That looks like it's working for me!

I'll pull it apart and integrate into my code!