Ensure portal root exists in the DOM (#950)

* ensure that the portal root is always in the DOM

When using NextJS, it happens that between page transitions the portal
root gets removed form the DOM. We will check the DOM when the `target`
updates, and if it doesn't exist anymore, then we will re-insert it in
the DOM.

* update changelog

CHANGELOG.md

@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased - React]
 
-- Nothing yet!
+### Fixes
+
+- Ensure portal root exists in the DOM ([#950](https://github.com/tailwindlabs/headlessui/pull/950))
 
 ## [Unreleased - Vue]
 

packages/@headlessui-react/src/components/portal/portal.tsx

@@ -34,6 +34,15 @@ function usePortalTarget(): HTMLElement | null {
     return document.body.appendChild(root)
   })
 
+  // Ensure the portal root is always in the DOM
+  useEffect(() => {
+    if (target === null) return
+
+    if (!document.body.contains(target)) {
+      document.body.appendChild(target)
+    }
+  }, [target])
+
   useEffect(() => {
     if (forceInRoot) return
     if (groupTarget === null) return