[Bug]: headlessui-portal-root disappears on navigation
evangeline opened this issue · 4 comments
What package within Headless UI are you using?
@headlessui/react
What version of that package are you using?
v1.3.0
What browser are you using?
Chorome
Reproduction repository
NA
Describe your issue
I'm currently using React Router for navigation and I noticed that on every other navigation, headlessui-portal-root disappears from by index.html's <body />. This prevents anything that's being portaled with Headless from appearing. I've been digging into Headless' source code and it looks like if the Portal component doesn't detect any children, it removes the <div id="headlessui-portal-root" />.
My question is, would this ever create a race condition between components being loaded into index.html and Portal checking for children? Or is this some other issue relating to routing? I've not really been able to reproduce this scenario in codesandbox because we have a huge repo and I've not been able to isolate this issue.
My current workaround is to hardcode <div id="headlessui-portal-root" /> with a empty div child, but obviously this messes up with the ordering of the html elements.
My question is, would this ever create a race condition between components being loaded into index.html and Portal checking for children?
Looks like that. I was making page load optimizations in my nextjs project. When I added dynamic import for my ModalForm component using next/dynamic it stopped appearing after the route change. I click the button that should open it and see the following warning in the console:
There are no focusable elements inside the <FocusTrap />
Dialog@webpack-internal:///./node_modules/@headlessui/react/dist/components/dialog/dialog.esm.js:84:14
ModalForm@webpack-internal:///./src/components/ModalForm.tsx:25:78
If I remove the dynamic import everything works fine again
Hey! Thank you for your bug report!
Much appreciated! 🙏
This should be fixed in the latest version 👍