diff --git a/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap
index 8686ba2b135cc0..a3c7de7bd7661f 100644
--- a/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap
+++ b/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap
@@ -1,3 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`Basic rendering should display with required props 1`] = `""`;
+exports[`Basic rendering should display with required props 1`] = `""`;
diff --git a/packages/components/src/popover/index.js b/packages/components/src/popover/index.js
index a0562ad1f0263b..e9887a8dd69d06 100644
--- a/packages/components/src/popover/index.js
+++ b/packages/components/src/popover/index.js
@@ -245,6 +245,7 @@ const Popover = ( {
const anchorRefFallback = useRef( null );
const contentRef = useRef( null );
const containerRef = useRef();
+ const contentRect = useRef();
const isMobileViewport = useViewportMatch( 'medium', '<' );
const [ animateOrigin, setAnimateOrigin ] = useState();
const isExpanded = expandOnMobile && isMobileViewport;
@@ -285,10 +286,10 @@ const Popover = ( {
anchorHorizontalBuffer
);
- const contentSize = {
- height: contentEl.scrollHeight,
- width: contentEl.scrollWidth,
- };
+ if ( ! contentRect.current ) {
+ contentRect.current = contentEl.getBoundingClientRect();
+ }
+
const {
popoverTop,
popoverLeft,
@@ -296,7 +297,7 @@ const Popover = ( {
yAxis,
contentHeight,
contentWidth,
- } = computePopoverPosition( anchor, contentSize, position );
+ } = computePopoverPosition( anchor, contentRect.current, position );
setClass( containerEl, 'is-without-arrow', noArrow || ( xAxis === 'center' && yAxis === 'middle' ) );
setAttribute( containerEl, 'data-x-axis', xAxis );
@@ -321,7 +322,8 @@ const Popover = ( {
setAnimateOrigin( animateXAxis + ' ' + animateYAxis );
};
- refresh();
+ // Height may still adjust between now and the next tick.
+ const timeoutId = window.setTimeout( refresh );
/*
* There are sometimes we need to reposition or resize the popover that
@@ -335,6 +337,7 @@ const Popover = ( {
window.addEventListener( 'scroll', refresh, true );
return () => {
+ window.clearTimeout( timeoutId );
window.clearInterval( intervalHandle );
window.removeEventListener( 'resize', refresh );
window.removeEventListener( 'scroll', refresh, true );
diff --git a/packages/components/src/popover/test/__snapshots__/index.js.snap b/packages/components/src/popover/test/__snapshots__/index.js.snap
index cb1d263c4aa0fa..236ae2a7132936 100644
--- a/packages/components/src/popover/test/__snapshots__/index.js.snap
+++ b/packages/components/src/popover/test/__snapshots__/index.js.snap
@@ -8,11 +8,8 @@ exports[`Popover should pass additional props to portaled element 1`] = `