fix(components): Put Popover inside a portal (#2360)

* Put Popover inside a portal * Simplify logic * Add back in line breaks * Add back one more empty line
GetJobber · Feb 6, 2025 · 4798047 · 4798047
1 parent 2579026
commit 4798047
Showing 1 changed file with 28 additions and 30 deletions.
diff --git a/packages/components/src/Popover/Popover.tsx b/packages/components/src/Popover/Popover.tsx
@@ -2,6 +2,7 @@ import React, { CSSProperties, useState } from "react";
 import { usePopper } from "react-popper";
 import { useRefocusOnActivator } from "@jobber/hooks/useRefocusOnActivator";
 import classnames from "classnames";
+import ReactDOM from "react-dom";
 import classes from "./Popover.module.css";
 import { ButtonDismiss } from "../ButtonDismiss";
 
@@ -86,37 +87,34 @@ export function Popover({
     UNSAFE_className.dismissButtonContainer,
   );
   const arrowClassNames = classnames(classes.arrow, UNSAFE_className.arrow);
-
-  return (
-    <>
-      {open && (
-        <div
-          role="dialog"
-          data-elevation={"elevated"}
-          ref={setPopperElement}
-          style={{ ...popperStyles.popper, ...(UNSAFE_style.container ?? {}) }}
-          className={popoverClassNames}
-          {...attributes.popper}
-          data-testid="popover-container"
-        >
-          <div
-            className={dismissButtonClassNames}
-            style={UNSAFE_style.dismissButtonContainer ?? {}}
-            data-testid="popover-dismiss-button-container"
-          >
-            <ButtonDismiss onClick={onRequestClose} ariaLabel="Close dialog" />
-          </div>
-          {children}
-          <div
-            ref={setArrowElement}
-            className={arrowClassNames}
-            style={{ ...popperStyles.arrow, ...(UNSAFE_style.arrow ?? {}) }}
-            data-testid="popover-arrow"
-          />
-        </div>
-      )}
-    </>
+  const popoverContent = (
+    <div
+      role="dialog"
+      data-elevation={"elevated"}
+      ref={setPopperElement}
+      style={{ ...popperStyles.popper, ...(UNSAFE_style.container ?? {}) }}
+      className={popoverClassNames}
+      {...attributes.popper}
+      data-testid="popover-container"
+    >
+      <div
+        className={dismissButtonClassNames}
+        style={UNSAFE_style.dismissButtonContainer ?? {}}
+        data-testid="popover-dismiss-button-container"
+      >
+        <ButtonDismiss onClick={onRequestClose} ariaLabel="Close dialog" />
+      </div>
+      {children}
+      <div
+        ref={setArrowElement}
+        className={arrowClassNames}
+        style={{ ...popperStyles.arrow, ...(UNSAFE_style.arrow ?? {}) }}
+        data-testid="popover-arrow"
+      />
+    </div>
   );
+
+  return <>{open && ReactDOM.createPortal(popoverContent, document.body)}</>;
 }
 
 function buildModifiers(arrowElement: HTMLElement | undefined | null) {