From 271c6e4e9331c737d8c6ab03e474d345eb41f2c0 Mon Sep 17 00:00:00 2001
From: Haz <hazdiego@gmail.com>
Date: Sun, 29 Nov 2020 01:19:31 -0300
Subject: [PATCH 1/3] fix: Fix `Portal` warning on Next.js

---
 .../reakit/src/Dialog/__utils/useFocusTrap.ts |  6 ++---
 packages/reakit/src/Portal/Portal.tsx         | 22 +++++++------------
 2 files changed, 11 insertions(+), 17 deletions(-)

diff --git a/packages/reakit/src/Dialog/__utils/useFocusTrap.ts b/packages/reakit/src/Dialog/__utils/useFocusTrap.ts
index 8841df2c73..26fc7e67fc 100644
--- a/packages/reakit/src/Dialog/__utils/useFocusTrap.ts
+++ b/packages/reakit/src/Dialog/__utils/useFocusTrap.ts
@@ -34,8 +34,8 @@ export function useFocusTrap(
 
     if (!portal) {
       warning(
-        true,
-        "Can't trap focus within modal dialog because either `ref` wasn't passed to component or the component wasn't rendered within a portal",
+        !!portalRef.current,
+        "Can't trap focus within modal dialog because `ref` wasn't passed to component.",
         "See https://reakit.io/docs/dialog"
       );
       return undefined;
@@ -61,7 +61,7 @@ export function useFocusTrap(
       if (beforeElement.current) removeFromDOM(beforeElement.current);
       if (afterElement.current) removeFromDOM(afterElement.current);
     };
-  }, [portalRef, shouldTrap]);
+  }, [dialogRef, portalRef, shouldTrap]);
 
   // Focus trap
   React.useEffect(() => {
diff --git a/packages/reakit/src/Portal/Portal.tsx b/packages/reakit/src/Portal/Portal.tsx
index 0861a99984..69d25c8273 100644
--- a/packages/reakit/src/Portal/Portal.tsx
+++ b/packages/reakit/src/Portal/Portal.tsx
@@ -23,23 +23,18 @@ export function Portal({ children }: PortalProps) {
   // otherwise it's document.body
   // https://github.com/reakit/reakit/issues/513
   const context = React.useContext(PortalContext) || getBodyElement();
-  const [hostNode] = React.useState(() => {
-    if (canUseDOM) {
-      const element = document.createElement("div");
-      element.className = Portal.__className;
-      return element;
-    }
-    // ssr
-    return null;
-  });
+  const [hostNode, setHostNode] = React.useState<HTMLDivElement | null>(null);
 
   useIsomorphicEffect(() => {
-    if (!hostNode || !context) return undefined;
-    context.appendChild(hostNode);
+    if (!context) return undefined;
+    const element = document.createElement("div");
+    element.className = Portal.__className;
+    setHostNode(element);
+    context.appendChild(element);
     return () => {
-      context.removeChild(hostNode);
+      context.removeChild(element);
     };
-  }, [hostNode, context]);
+  }, [context]);
 
   if (hostNode) {
     return ReactDOM.createPortal(
@@ -49,7 +44,6 @@ export function Portal({ children }: PortalProps) {
       hostNode
     );
   }
-
   // ssr
   return null;
 }

From 9ca3dbcc5d2912b233a2a9e92e63c8f57bd626ca Mon Sep 17 00:00:00 2001
From: Haz <hazdiego@gmail.com>
Date: Sun, 29 Nov 2020 01:46:49 -0300
Subject: [PATCH 2/3] Try with useEffect

---
 packages/reakit/src/Portal/Portal.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/reakit/src/Portal/Portal.tsx b/packages/reakit/src/Portal/Portal.tsx
index 69d25c8273..13a4e818db 100644
--- a/packages/reakit/src/Portal/Portal.tsx
+++ b/packages/reakit/src/Portal/Portal.tsx
@@ -1,6 +1,5 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
-import { useIsomorphicEffect } from "reakit-utils/useIsomorphicEffect";
 import { canUseDOM } from "reakit-utils/canUseDOM";
 
 export type PortalProps = {
@@ -25,7 +24,7 @@ export function Portal({ children }: PortalProps) {
   const context = React.useContext(PortalContext) || getBodyElement();
   const [hostNode, setHostNode] = React.useState<HTMLDivElement | null>(null);
 
-  useIsomorphicEffect(() => {
+  React.useEffect(() => {
     if (!context) return undefined;
     const element = document.createElement("div");
     element.className = Portal.__className;

From baa85ac5b940acb55e4cbec4b28dace8e235ba4a Mon Sep 17 00:00:00 2001
From: Pablo Espinosa <pespinosabermejo@twilio.com>
Date: Fri, 6 Jan 2023 19:20:04 +0000
Subject: [PATCH 3/3] refactor: updated test snapshot as it was outdated repro
 here: https://bty6qt-3000.preview.csb.app/1 csb:
 https://codesandbox.io/p/sandbox/bitter-haze-bty6qt

---
 packages/reakit/src/Dialog/__tests__/Dialog-test.tsx | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/packages/reakit/src/Dialog/__tests__/Dialog-test.tsx b/packages/reakit/src/Dialog/__tests__/Dialog-test.tsx
index 02abc3e26e..2dce8a8fcc 100644
--- a/packages/reakit/src/Dialog/__tests__/Dialog-test.tsx
+++ b/packages/reakit/src/Dialog/__tests__/Dialog-test.tsx
@@ -43,12 +43,6 @@ test("render visible", () => {
   expect(baseElement).toMatchInlineSnapshot(`
     <body>
       <div />
-      <div
-        aria-hidden="true"
-        class="__reakit-focus-trap"
-        style="position: fixed;"
-        tabindex="0"
-      />
       <div
         class="__reakit-portal"
       >
@@ -63,12 +57,6 @@ test("render visible", () => {
           dialog
         </div>
       </div>
-      <div
-        aria-hidden="true"
-        class="__reakit-focus-trap"
-        style="position: fixed;"
-        tabindex="0"
-      />
     </body>
   `);
 });