search

tailwindlabs / headlessui

Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
https://headlessui.com
MIT License
25.81k stars 1.07k forks source link

Mutiple Portal Order breaks access to top Dialog #3443

Closed mschipperheyn closed 3 weeks ago

mschipperheyn commented 1 month ago

What package within Headless UI are you using? @headlessui/react remix run 2.11.2

What version of that package are you using?

2.1.2

What browser are you using?

Chrome

Reproduction URL https://sorry.nocando - will do later if I have time

Describe your issue

When you have an existing Dialog open and navigate to a new url that also contains an open Dialog, the portal gets appended to the Portal root div and displays normally over the existing dialog. However, the underlying dialog still controls the ui bc the overlaying portal is marked inert. A reload fixes this. I assume this is caused by the innovative way remix allows you to create overlays using page routes. I assume the portal counting mechanism gets screwed up somehow

Parent route > contains ` Child route > renders in place of the outlet

nosovj commented 1 month ago

I ran into this issue this morning, when you have a Modal with a Listbox child, it seems to set the portal to inert for all of the elements, so none of the children are clickable.

Expected: image

Actual: image

It seems like this is an issue with headlessui 2.1.3, when I changed the version from "@headlessui/react": "^2.1.2" to "@headlessui/react": "2.1.2", it seems to have went away.

BobbiSixkiller commented 1 month ago

I experienced this myself as well on version 2.1.3. If i rendered Listbox or Select inside modal, the individual OptionItems werent clickable so after clicking on a particular option the whole list just disappered. Reverting back to 2.1.2 fixed this.

sollambert commented 3 weeks ago

Getting this issue as well when using Listbox within a modal, downgrading to 2.1.2 resolved the issue

RobinMalfait commented 3 weeks ago

Hey!

I can't seem to reproduce this issue anymore with the latest version of Headless UI. Can everybody try and upgrade to the latest version:

npm install @headlessui/react

This is a related issue that also works with the latest version: https://github.com/tailwindlabs/headlessui/issues/3330

If that is not sufficient for your use case, please create a new issue with a minimal reproduction repo attached and I'm happy to take a look!

Hope this helps!

gstrobl commented 3 weeks ago

I also can confirm this issue, created a quick example here:

https://codesandbox.io/p/live/a71299e7-f07e-422f-b037-db59c76e58fc

RobinMalfait commented 3 weeks ago

@gstrobl did you delete the sandbox? If not, can you make it public?

image
gstrobl commented 2 weeks ago

@gstrobl did you delete the sandbox? If not, can you make it public?

image

Sorry, now it's public!