diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 5e0e1d9563d21..9bdfec755a5ca 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -13,6 +13,7 @@ - `Popover`: enable auto-updating every animation frame ([#43617](https://github.com/WordPress/gutenberg/pull/43617)). - `Popover`: improve the component's performance and reactivity to prop changes by reworking its internals ([#43335](https://github.com/WordPress/gutenberg/pull/43335)). - `NavigatorScreen`: updated to satisfy `react/exhaustive-deps` eslint rule ([#43876](https://github.com/WordPress/gutenberg/pull/43876)) +- `Popover`: fix positioning when reference and floating elements are both within an iframe ([#43971](https://github.com/WordPress/gutenberg/pull/43971)) ### Enhancements diff --git a/packages/components/src/popover/index.tsx b/packages/components/src/popover/index.tsx index a566e259a84f5..905943fc7cba2 100644 --- a/packages/components/src/popover/index.tsx +++ b/packages/components/src/popover/index.tsx @@ -416,10 +416,12 @@ const UnforwardedPopover = ( // document scrolls. Also update the frame offset if the view resizes. useLayoutEffect( () => { if ( - // reference and floating are in the same document + // Reference and root documents are the same. referenceOwnerDocument === document || - // the reference's document has a view (i.e. window) - // and a frame element (ie. it's an iframe) + // Reference and floating are in the same document. + referenceOwnerDocument === refs?.floating?.current?.ownerDocument || + // The reference's document has no view (i.e. window) + // or frame element (ie. it's not an iframe). ! referenceOwnerDocument?.defaultView?.frameElement ) { frameOffsetRef.current = undefined;