Multiple dialog Scroll Behavior Bug

[perdanafm]

What package within Headless UI are you using?

For example: @headlessui/react

What version of that package are you using?

^1.4.2

What browser are you using?

Chrome 96

Reproduction URL

Describe your issue

So iam creating multiple section with Transition and Dialog and when i change from 1st Dialog to 2nd Dialog, the odd is happening, the html tag is switched between the open dialog and the close dialog as you can see below

Is there anything wrong with my code or is this common bug ?

[TheCharlesJosh]

I have the same issue. Seems like a problem with the way the dialog component handles overflows for scroll locking. Given that the second dialog sees that the HTML tag is set to overflow: hidden (as it was set by the first dialog), it reverts back to that state on close/unmount.

Can't figure out a permanent fix yet (as I think the code may require to be aware of chaining dialog boxes altogether), but what I did was set a setTimeout to open the second dialog box, until the first dialog box is fully unmounted (500 ms works well for me).

[perdanafm]

Yeah this is ki

I have the same issue. Seems like a problem with the way the dialog component handles overflows for scroll locking. Given that the second dialog sees that the HTML tag is set to overflow: hidden (as it was set by the first dialog), it reverts back to that state on close/unmount.

Can't figure out a permanent fix yet (as I think the code may require to be aware of chaining dialog boxes altogether), but what I did was set a setTimeout to open the second dialog box, until the first dialog box is fully unmounted (500 ms works well for me).

Thanks for your reply man, i appreciate it.
Anyway can u share ur snippet here ? i wanna see how u put the setTimeout on the Dialog component

[RobinMalfait]

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

This might be a timing issue bug because we restore the overflow: hidden when we close the Dialog but if the second Dialog is opened just a split second before the first one hides then you run into this issue.

If this is still a problem, can you create a new issue with a minimal reproduction repo just to be sure that this is the actually issue you have?

[mreduar]

The same thing happens to me, and I don't open any dialog. All my dialogs are closed with the :unmount=false property so that the dialogs are kept in the doom for requirements. When I do this the scroll of the page is bugged, and not only that but when I go to other pages the style="overflow: hidden;" stays in the root html tag and all the other pages have their scroll damaged too (I use Inertia).
Maybe I can send a test repository later.

[zlwaterfield]

For anyone seeing this, it's definitely a timing issue with multiple dialogs. When the first dialog closes, it sets overflow: hidden; on the html element, but there is a delay from the animation and the overflow: hidden; for the second dialog is set right away. And it also seems to be a toggle so so the order gets mixed up.

Here's my solution:

  showDialogOne(false)
  setTimeout(() => showDialogTwo(true), 200)

I've found 200ms consistently fixes the issue.