fix: make menu, popover, select ssr friendly (#1660)

* fix: make createportal ssr friendly * refactor: change conditional to follow docs
chanzuckerberg · Jun 16, 2023 · eac8829 · eac8829
1 parent bbee463
commit eac8829
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 25 deletions.
diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
@@ -159,10 +159,14 @@ const MenuItems = (props: MenuItemsProps) => {
     ...props,
     ...popperAttributes,
   };
-
-  return (
-    <>{createPortal(<HeadlessMenu.Items {...optionProps} />, document.body)}</>
-  );
+  if (typeof document !== 'undefined') {
+    return (
+      <>
+        {createPortal(<HeadlessMenu.Items {...optionProps} />, document.body)}
+      </>
+    );
+  }
+  return null;
 };
 
 /**

diff --git a/src/components/Popover/Popover.tsx b/src/components/Popover/Popover.tsx
@@ -138,23 +138,25 @@ const PopoverContent = ({
   };
 
   const componentClassName = clsx(styles['popover-content'], className);
-
-  return (
-    <>
-      {createPortal(
-        <HeadlessPopover.Panel
-          {...allProps}
-          as="article"
-          className={componentClassName}
-        >
-          <PopoverContainer className={bodyClassName}>
-            {children as React.ReactNode}
-          </PopoverContainer>
-        </HeadlessPopover.Panel>,
-        document.body,
-      )}
-    </>
-  );
+  if (typeof document !== 'undefined') {
+    return (
+      <>
+        {createPortal(
+          <HeadlessPopover.Panel
+            {...allProps}
+            as="article"
+            className={componentClassName}
+          >
+            <PopoverContainer className={bodyClassName}>
+              {children as React.ReactNode}
+            </PopoverContainer>
+          </HeadlessPopover.Panel>,
+          document.body,
+        )}
+      </>
+    );
+  }
+  return null;
 };
 
 /**

diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
@@ -247,10 +247,12 @@ const SelectOptions = function (props: PropsWithRenderProp<{ open: boolean }>) {
     ...popperAttributes,
     ...other,
   };
-
-  return (
-    <>{createPortal(<Listbox.Options {...optionProps} />, document.body)}</>
-  );
+  if (typeof document !== 'undefined') {
+    return (
+      <>{createPortal(<Listbox.Options {...optionProps} />, document.body)}</>
+    );
+  }
+  return null;
 };
 
 type SelectOptionProps = {