fix(FloatingPortal): prevent undefined id with unconditional render…

…ing in React <18 (#2908)
floating-ui · May 18, 2024 · 5c114c2 · 5c114c2
1 parent fec4c04
commit 5c114c2
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 0 deletions.
diff --git a/.changeset/quick-buses-lay.md b/.changeset/quick-buses-lay.md
@@ -0,0 +1,5 @@
+---
+"@floating-ui/react": patch
+---
+
+fix(FloatingPortal): prevent `undefined` id with unconditional rendering in React <18
diff --git a/packages/react/src/components/FloatingPortal.tsx b/packages/react/src/components/FloatingPortal.tsx
@@ -66,6 +66,10 @@ export function useFloatingPortalNode(
   }, [portalNode]);
 
   useModernLayoutEffect(() => {
+    // Wait for the uniqueId to be generated before creating the portal node in
+    // React <18 (using `useFloatingId` instead of the native `useId`).
+    // https://github.com/floating-ui/floating-ui/issues/2778
+    if (!uniqueId) return;
     if (portalNodeRef.current) return;
     const existingIdRoot = id ? document.getElementById(id) : null;
     if (!existingIdRoot) return;
@@ -79,6 +83,7 @@ export function useFloatingPortalNode(
   }, [id, uniqueId]);
 
   useModernLayoutEffect(() => {
+    if (!uniqueId) return;
     if (portalNodeRef.current) return;
 
     let container = root || portalContext?.portalNode;