Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Closing Dialog breaks site on Safari mobile (<ios 14)

See original GitHub issue

Closing a dialog in Safari on iOS 13.2 renders my app unusable. The problem seems to be the node <div id="headlessui-portal-root">…</div> which stays in the DOM even after closing the dialog. In other browsers, this node is removed from the DOM.

What package within Headless UI are you using?

“@headlessui/react”: “1.6.6”,

What browser are you using?

Safari ios 13

Reproduction URL

clone repo https://github.com/tianyingchun/headlessui
yarn install
open http://localhost:3000/ on the modern mobile safari (ios15) it works fine .
open http://localhost:3000/ on the safari of ios 13 click Open Sidebar it will popup modal, while close dialog please see below dom

while sidebar modal is open, and try to close it , and then try to re-click Open Sidebar, the web page is no response. the reasons as below picture shown.

Describe your issue while Dialog closed(transition end) it should clean <div id="#headlessui-portal-root" />, && remove <html style="overflow: hidden;" /> at safari of (ios <14 )

Issue Analytics

State:
Created a year ago
Reactions:6
Comments:16

Top GitHub Comments

6reactions

mshickcommented, Aug 1, 2022

Also experiencing this on latest Chrome. As mentioned, the Dialog component does not seem to clean up after itself when combined with Transition (as the TailwindUI code does).

I was able to work around this by setting the Dialog open prop as well as the Transition that wraps it.

E.g., from this:

    <Transition.Root show={isOpen} as={Fragment}>
      <Dialog as="div" className="relative z-10" onClose={onClose}>

To this:

    <Transition.Root show={isOpen} as={Fragment}>
      <Dialog as="div" className="relative z-10" open={isOpen} onClose={onClose}>

0reactions

RobinMalfaitcommented, Aug 31, 2022

If we find a solution that solves these issues (e.g.: not using native transition* events) that doesn’t hold us back or isn’t a big maintenance burden then I’m happy to implement those. But I can’t promise an ETA or if we will find a solution to these problems.

Since the original issue is also about an old version of iOS I’m going to close this issue because of the aforementioned reasons. I know there are still some issues around the Transition component but they are tracked in other issues like:

#1557
#1638

Those will be solved in one of the next PRs.

If anyone has other issues feel free to open new issues with minimal reproduction repo(s) attached so that we can take a look at those. Hope you all understand!