fix Popover controlled mode during first render (#1276)

iTwin · May 15, 2023 · 5cfd0bb · 5cfd0bb
1 parent 6b714e1
commit 5cfd0bb
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/.changeset/poor-bees-sneeze.md b/.changeset/poor-bees-sneeze.md
@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': patch
+---
+
+Fixed an issue where using Popover components in controlled mode (through `visible` prop) was appending it to the wrong root element.
diff --git a/packages/itwinui-react/src/core/utils/components/Popover.tsx b/packages/itwinui-react/src/core/utils/components/Popover.tsx
@@ -8,7 +8,7 @@ import cx from 'classnames';
 import Tippy from '@tippyjs/react';
 import type { TippyProps } from '@tippyjs/react';
 import type { Placement, Instance } from 'tippy.js';
-import { useMergedRefs } from '../hooks/useMergedRefs.js';
+import { useMergedRefs, useIsClient } from '../hooks/index.js';
 export type PopoverInstance = Instance;
 import '@itwin/itwinui-css/css/utils.css';
 import { ThemeContext } from '../../ThemeProvider/ThemeProvider.js';
@@ -40,6 +40,7 @@ export type PopoverProps = {
 export const Popover = React.forwardRef((props: PopoverProps, ref) => {
   const [mounted, setMounted] = React.useState(false);
   const themeInfo = React.useContext(ThemeContext);
+  const isDomAvailable = useIsClient();
 
   const tippyRef = React.useRef<Element>(null);
   const refs = useMergedRefs(tippyRef, ref);
@@ -74,6 +75,10 @@ export const Popover = React.forwardRef((props: PopoverProps, ref) => {
     zIndex: 99999,
     ...props,
     className: cx('iui-popover', props.className),
+    // add additional check for isDomAvailable when using in controlled mode,
+    // because rootRef is not available in first render
+    visible:
+      props.visible !== undefined ? props.visible && isDomAvailable : undefined,
     plugins: [
       lazyLoad,
       removeTabIndex,