Modal overflow hidden issue

[philmetzger]

So have a look at this issue: #881

Basically I have something similar (might not be the exact issue) but I was able to create a sandbox of the issue.

Check it out here: https://codesandbox.io/s/headless-ui-dialog-forked-ys0ktt?file=/src/App.tsx

The issue for me is when I have 2 modals and i want to go from 1 to the other.
Maybe there is something wrong with my implementation or a bug within headlessui?

[RobinMalfait]

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

The short answer is that we currently don't support simultaneous Modals unless they are nested. In your case, due to the Transition, there is a moment in time where both Modals will be in an open state.

More information and some potential solutions can be found here: #1744 (comment)

[philmetzger]

I would like to conclude I solved this with a short setTimeout between modals

[Makxzod]

@philmetzger can u show a short snippet how you used setTimeout this way? I have exactly the same problem as you ;)

[philmetzger]

Hey @hansens1927 unforunately as things go, things have changed, and i dont have that code anymore.

But maybe I can help. So I think the issue is the modal has some exit animation. So you have to kind of delay the next modal until the animation is done and then show the next moda. Hope this helps.

[Makxzod]

@philmetzger how would u delay it?

[philmetzger]

depends on how you are showing and hiding modals. But maybe something like this:

setShowModal(1) // first modal visible
setShowModal(null) // first modal hidden
setTimeout(() => setShowModal(2), 250); // second modal visible

Something like that I think

[Makxzod]

@philmetzger Thank you for the fast replies, fixed it by doing what was here: #1698