headlessui: Closing Dialog breaks site on Safari mobile ( 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 )
related existed issue https://github.com/tailwindlabs/headlessui/issues/1538
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 clickOpen Sidebarit 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 )
related existed issue https://github.com/tailwindlabs/headlessui/issues/1538
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Reactions: 6
- Comments: 16
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
Dialogopenprop as well as theTransitionthat wraps it.E.g., from this:
To this: