Fix dropdown floating portals (#860)

workleap · Jan 22, 2025 · bcb9f75 · bcb9f75
1 parent b705add
commit bcb9f75
Show file tree

Hide file tree

Showing 14 changed files with 154 additions and 139 deletions.
diff --git a/.changeset/tidy-suits-wave.md b/.changeset/tidy-suits-wave.md
@@ -0,0 +1,11 @@
+---
+"@igloo-ui/area-chart": patch
+"@igloo-ui/dropdown": patch
+"@igloo-ui/popover": patch
+"@igloo-ui/select": patch
+"@igloo-ui/text-editor": patch
+"@igloo-ui/tooltip": patch
+---
+
+- Updated @floating-ui/react to latest to fix issues with FloatingPortal
+- Updated Dropdown, Popover, FloatingLinkEditorPlugin, and Tooltip to render portals only when open
diff --git a/packages/Dropdown/package.json b/packages/Dropdown/package.json
@@ -24,7 +24,7 @@
         "build": "rollup -c rollup.config.js"
     },
     "dependencies": {
-        "@floating-ui/react": "^0.26.22",
+        "@floating-ui/react": "^0.27.3",
         "@hopper-ui/tokens": "^4.3.0",
         "@igloo-ui/tokens": "^2.1.0",
         "classnames": "^2.5.1"

diff --git a/packages/Dropdown/src/Dropdown.tsx b/packages/Dropdown/src/Dropdown.tsx
@@ -1,20 +1,20 @@
-import * as React from "react";
-import cx from "classnames";
 import {
+    autoUpdate,
     flip,
+    FloatingFocusManager,
+    FloatingPortal,
     size as fuiSize,
-    useMergeRefs,
-    offset,
     hide,
-    autoUpdate,
-    useFloating,
-    FloatingFocusManager,
+    offset,
     useDismiss,
+    useFloating,
     useInteractions,
-    useTransitionStyles,
+    useMergeRefs,
     useRole,
-    FloatingPortal
+    useTransitionStyles
 } from "@floating-ui/react";
+import cx from "classnames";
+import * as React from "react";
 
 import "./dropdown.scss";
 
@@ -239,6 +239,22 @@ const Dropdown: React.FunctionComponent<DropdownProps> = React.forwardRef(
             }
         }, [isMounted, onAfterClose, dropdownPreviouslyOpen]);
 
+        const renderFloatingElem = (): React.ReactNode => {
+            if (disablePortal) {
+                return floatingElem;
+            }
+
+            if (isMounted) {
+                return (
+                    <FloatingPortal>
+                        {floatingElem}
+                    </FloatingPortal>
+                );
+            }
+
+            return null;
+        };
+
         return (
             <>
                 {renderReference ? (
@@ -252,11 +268,7 @@ const Dropdown: React.FunctionComponent<DropdownProps> = React.forwardRef(
                         {children}
                     </div>
                 )}
-                {disablePortal ? (
-                    floatingElem
-                ) : (
-                    <FloatingPortal>{floatingElem}</FloatingPortal>
-                )}
+                {renderFloatingElem()}
             </>
         );
     }

diff --git a/packages/Dropdown/src/__snapshots__/Dropdown.test.tsx.snap b/packages/Dropdown/src/__snapshots__/Dropdown.test.tsx.snap
@@ -8,12 +8,19 @@ exports[`Dropdown It should render without error and a snapshot 1`] = `
       aria-expanded="true"
       aria-haspopup="listbox"
       class="ids-dropdown__ref"
+      data-floating-ui-inert=""
       role="combobox"
     >
       <button>
         Settings
       </button>
     </div>
+    <span
+      aria-hidden="true"
+      data-floating-ui-inert=""
+      style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
+      tabindex="-1"
+    />
     <span
       data-floating-ui-focus-guard=""
       data-type="outside"
@@ -23,6 +30,7 @@ exports[`Dropdown It should render without error and a snapshot 1`] = `
     />
     <span
       aria-owns=":r2:"
+      data-floating-ui-inert=""
       style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
     />
     <span
@@ -46,12 +54,13 @@ exports[`Dropdown It should render without error and a snapshot 1`] = `
     />
     <div
       class="ids-dropdown ids-dropdown--bottom-start"
+      data-floating-ui-focusable=""
       data-show="true"
       data-test="dropdown1"
       id=":r0:"
       role="listbox"
       style="position: fixed; top: 0px; left: 0px; opacity: 0; transform: translateY(1rem);"
-      tabindex="0"
+      tabindex="-1"
     >
       <div
         class="ids-dropdown__scroll-content"

diff --git a/packages/Popover/package.json b/packages/Popover/package.json
@@ -31,7 +31,7 @@
     "@igloo-ui/tokens": "^2.1.0",
     "@hopper-ui/tokens": "^4.3.2",
     "classnames": "^2.3.2",
-    "@floating-ui/react": "^0.26.9"
+    "@floating-ui/react": "^0.27.3"
   },
   "browserslist": [
     "> 1%",

diff --git a/packages/Popover/src/Popover.tsx b/packages/Popover/src/Popover.tsx
@@ -1,24 +1,23 @@
-import * as React from "react";
-import cx from "classnames";
 import {
+    autoPlacement,
+    autoUpdate,
     flip,
-    shift,
+    FloatingFocusManager,
+    FloatingPortal,
     offset,
-    autoUpdate,
-    useFloating,
+    safePolygon,
+    shift,
+    useClick,
     useDismiss,
+    useFloating,
+    useHover,
     useInteractions,
-    useTransitionStyles,
-    autoPlacement,
     useRole,
-    FloatingPortal,
-    useClick,
-    useHover,
-    FloatingFocusManager,
-    safePolygon,
-    type ReferenceType,
+    useTransitionStyles,
     type UseHoverProps
 } from "@floating-ui/react";
+import cx from "classnames";
+import * as React from "react";
 
 import IconButton from "@igloo-ui/icon-button";
 import Close from "@igloo-ui/icons/dist/Close";
@@ -117,7 +116,7 @@ const Popover: React.FunctionComponent<PopoverProps> = ({
         ...floatingUIPlacement
     });
 
-    const useHoverProps: UseHoverProps<ReferenceType> = {
+    const useHoverProps: UseHoverProps = {
         enabled: triggerEvent === "hover",
         restMs: 150
     };
@@ -211,17 +210,17 @@ const Popover: React.FunctionComponent<PopoverProps> = ({
             >
                 {children}
             </span>
-            <FloatingPortal>
-                {isMounted && (
+            {isMounted && (
+                <FloatingPortal>
                     <FloatingFocusManager
                         context={context}
                         modal={false}
                         initialFocus={-1}
                     >
                         {popover}
                     </FloatingFocusManager>
-                )}
-            </FloatingPortal>
+                </FloatingPortal>
+            )}
         </>
     );
 };

diff --git a/packages/Popover/src/__snapshots__/Popover.test.tsx.snap b/packages/Popover/src/__snapshots__/Popover.test.tsx.snap
@@ -15,10 +15,6 @@ exports[`Popover It should render a snapshot 1`] = `
         popover trigger
       </span>
     </div>
-    <div
-      data-floating-ui-portal=""
-      id=":r2:"
-    />
   </body>,
   "container": <div>
     <span

diff --git a/packages/TextEditor/package.json b/packages/TextEditor/package.json
@@ -25,7 +25,7 @@
         "build": "rollup -c rollup.config.js"
     },
     "dependencies": {
-        "@floating-ui/react": "^0.24.8",
+        "@floating-ui/react": "^0.27.3",
         "@igloo-ui/button": "^0.10.0",
         "@igloo-ui/icon-button": "^1.4.0",
         "@igloo-ui/input": "^2.3.2",

diff --git a/packages/TextEditor/src/plugins/FloatingLinkEditorPlugin.tsx b/packages/TextEditor/src/plugins/FloatingLinkEditorPlugin.tsx
@@ -1,21 +1,21 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
-import * as React from "react";
-import cx from "classnames";
-import { type Dispatch, useCallback, useEffect, useRef, useState } from "react";
 import {
+    autoUpdate,
     flip,
-    shift,
+    FloatingFocusManager,
+    FloatingPortal,
+    hide,
     offset,
-    autoUpdate,
-    useFloating,
+    shift,
+    useClick,
     useDismiss,
+    useFloating,
     useInteractions,
-    useTransitionStyles,
-    hide,
-    FloatingPortal,
-    useClick,
-    FloatingFocusManager
+    useTransitionStyles
 } from "@floating-ui/react";
+import cx from "classnames";
+import * as React from "react";
+import { type Dispatch, useCallback, useEffect, useRef, useState } from "react";
 
 import {
     $isAutoLinkNode,
@@ -38,12 +38,12 @@ import {
 } from "lexical";
 
 import IconButton from "@igloo-ui/icon-button";
-import Input from "@igloo-ui/input";
 import Checkmark from "@igloo-ui/icons/dist/Checkmark";
-import Delete from "@igloo-ui/icons/dist/Delete";
 import Close from "@igloo-ui/icons/dist/Close";
+import Delete from "@igloo-ui/icons/dist/Delete";
 import Edit from "@igloo-ui/icons/dist/Edit";
 import External from "@igloo-ui/icons/dist/Launch";
+import Input from "@igloo-ui/input";
 
 import type { Messages } from "../TextEditor";
 import { getSelectedNode } from "../utils/getSelectedNode";
@@ -335,8 +335,8 @@ function FloatingLinkEditor({
     });
 
     return (
-        <FloatingPortal>
-            {isMounted && (
+        isMounted ? (
+            <FloatingPortal>
                 <FloatingFocusManager context={context} modal={false} initialFocus={-1}>
                     <div
                         ref={refs.setFloating}
@@ -352,8 +352,8 @@ function FloatingLinkEditor({
                         {!isLink ? null : linkEditorHTML}
                     </div>
                 </FloatingFocusManager>
-            )}
-        </FloatingPortal>
+            </FloatingPortal>
+        ) : null
     );
 }
 

diff --git a/packages/Tooltip/package.json b/packages/Tooltip/package.json
@@ -28,7 +28,7 @@
   "dependencies": {
     "@igloo-ui/tokens": "^2.1.0",
     "@hopper-ui/tokens": "^4.3.2",
-    "@floating-ui/react": "^0.24.8",
+    "@floating-ui/react": "^0.27.3",
     "classnames": "^2.3.2"
   },
   "browserslist": [

diff --git a/packages/Tooltip/src/Tooltip.test.tsx b/packages/Tooltip/src/Tooltip.test.tsx
@@ -15,7 +15,7 @@ describe('Tooltip', () => {
   const defaultComponentSetup = {
     children: 'children',
     content: 'tooltip copy',
-    dataTest: 'tooltip-id',
+    dataTest: 'tooltip-id'
   };
 
   test('It should render a snapshot', (): void => {

diff --git a/packages/Tooltip/src/Tooltip.tsx b/packages/Tooltip/src/Tooltip.tsx
@@ -1,21 +1,21 @@
-import * as React from "react";
-import cx from "classnames";
 import {
     arrow,
+    autoPlacement,
+    autoUpdate,
     flip,
-    shift,
+    FloatingPortal,
     offset,
-    autoUpdate,
-    useFloating,
+    shift,
     useDismiss,
-    useInteractions,
-    useTransitionStyles,
-    autoPlacement,
-    useHover,
+    useFloating,
     useFocus,
+    useHover,
+    useInteractions,
     useRole,
-    FloatingPortal
+    useTransitionStyles
 } from "@floating-ui/react";
+import cx from "classnames";
+import * as React from "react";
 
 import useDeviceDetect from "./hooks/useDeviceDetect";
 
@@ -168,8 +168,8 @@ const Tooltip: React.FunctionComponent<TooltipProps> = ({
   return (
       <span ref={refs.setReference} className={classes} {...getReferenceProps()}>
           {children}
-          <FloatingPortal>
-              {isMounted && (
+          {isMounted && (
+              <FloatingPortal>
                   <div
                       ref={refs.setFloating}
                       className={tooltipClasses}
@@ -193,8 +193,8 @@ const Tooltip: React.FunctionComponent<TooltipProps> = ({
                           style={arrowStyles}
                       />
                   </div>
-              )}
-          </FloatingPortal>
+              </FloatingPortal>
+          )}
       </span>
   );
 };

diff --git a/packages/Tooltip/src/__snapshots__/Tooltip.test.tsx.snap b/packages/Tooltip/src/__snapshots__/Tooltip.test.tsx.snap
@@ -11,10 +11,6 @@ exports[`Tooltip It should render a snapshot 1`] = `
         tooltip
       </span>
     </div>
-    <div
-      data-floating-ui-portal=""
-      id=":r2:"
-    />
   </body>,
   "container": <div>
     <span