diff --git a/.changeset/tidy-suits-wave.md b/.changeset/tidy-suits-wave.md new file mode 100644 index 00000000..4143ad36 --- /dev/null +++ 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 index 51c32bfb..c1b99ca1 100644 --- 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 index 88242066..7cf517d2 100644 --- 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 = React.forwardRef( } }, [isMounted, onAfterClose, dropdownPreviouslyOpen]); + const renderFloatingElem = (): React.ReactNode => { + if (disablePortal) { + return floatingElem; + } + + if (isMounted) { + return ( + + {floatingElem} + + ); + } + + return null; + }; + return ( <> {renderReference ? ( @@ -252,11 +268,7 @@ const Dropdown: React.FunctionComponent = React.forwardRef( {children} )} - {disablePortal ? ( - floatingElem - ) : ( - {floatingElem} - )} + {renderFloatingElem()} ); } diff --git a/packages/Dropdown/src/__snapshots__/Dropdown.test.tsx.snap b/packages/Dropdown/src/__snapshots__/Dropdown.test.tsx.snap index 93ceef33..5e9eb2a7 100644 --- 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" > +