[Bug] Dialog: portal DOM node isn't removed anymore

[knoefel]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.6.1

What browser are you using?

Chrome

Reproduction

1. open sandbox (v1.6.1)
2. reduce the window size so that mobile layout will be used
3. open the sidebar via the menu button
4. make the window width bigger, so that it will switch back to the desktop layout (sidebar have to be open still)
5. reduce the window size so that mobile layout will be used again
6. try to open the sidebar again via the menu button -> it isn't working
   Reproduction URL

Not Working with v1.6.1

Working with v1.5.0

Describe your issue

Since v1.6.0 and the change regarding the Dialog.Panel component, there is a bug where the added portal DOM node isn't removed from the DOM anymore, when the Dialog component is hidden by CSS.

In the sandbox i'm using tailwindUI´s sidebar template. Here is also a video demonstrating the issue.

Screen.Recording.2022-05-06.at.18.47.52.mov

Prior to v1.6.0 it was working fine.

Thx in advance for your help and support!!

[nirix]

In the app I'm working on (private repo) I've run into this issue using the Dialog component with transitions.

I have a modal that contains a button to close the modal, the following steps will reproduce the issue:

• Open modal
• Click button to close modal
• Repeat a couple of times, no matter how fast or slow
• Portal DOM element remains, Dialog disappears due to a fade-out transition, but remains on the page, blocking clicks

The issue does not happen if using escape or clicking outside the dialog to close.

Just to reiterate, the issue only happens when using an element inside the Dialog to close it, I thought it had something to do with my code but I did a straight copy/paste from the examples and still ran into the issue.

[parssak]

I'm also experiencing this issue as well, any idea as to when it's getting fixed?

[RobinMalfait]

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

This should be fixed, and will is available in the latest release.

You can already try it using npm install @headlessui/react@latest.

[wescopeland]

Hey @RobinMalfait , unfortunately I am still seeing this issue with 1.6.3 😞
There is a DOM node with an id of "headlessui-portal-root" that is still in the document body after the dialog is closed using a close button.

[RobinMalfait]

@wescopeland can you create a reproduction repo and share it? The main issue that was solved in #1500 was not that the portal root was not deleted anymore, that issue is a side effect of the actual issue. In the original issues the issue was that the Dialog never unmounted and still had actual items in the portal root present.

[wescopeland]

Hi @RobinMalfait, I am referencing the issue posted earlier in this thread:

In the app I'm working on (private repo) I've run into this issue using the Dialog component with transitions.

I have a modal that contains a button to close the modal, the following steps will reproduce the issue:

• Open modal
• Click button to close modal
• Repeat a couple of times, no matter how fast or slow
• Portal DOM element remains, Dialog disappears due to a fade-out transition, but remains on the page, blocking clicks

The issue does not happen if using escape or clicking outside the dialog to close.

Just to reiterate, the issue only happens when using an element inside the Dialog to close it, I thought it had something to do with my code but I did a straight copy/paste from the examples and still ran into the issue.

Do we need to open a new ticket for this? At present, having a close button in a dialog and clicking it a few times causes the entire app to freeze.

[lmlorca]

Can confirm, same issue. Clicking a close button inside the Dialog freezes the app. For now using 1.5.0 solves the issue.

[RobinMalfait]

I appreciate all the "still broken" messages but can you please create an issue with a reproduction attached so that we can take a look at what's going on ❤️

[tlt254]

same issue

[adamwathan]

Locking to hopefully motivate someone to actually create a new issue with a reproduction if they run into this, otherwise we can't reproduce it and fix it 🫠