Initialize the content size used in Popover computation (#23279)

WordPress · Jun 18, 2020 · 9f44f9f · 9f44f9f
1 parent 881b7f2
commit 9f44f9f
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/packages/components/src/popover/index.js b/packages/components/src/popover/index.js
@@ -265,7 +265,6 @@ const Popover = ( {
 	const slot = useSlot( __unstableSlotName );
 	const isExpanded = expandOnMobile && isMobileViewport;
 	const [ containerResizeListener, contentSize ] = useResizeObserver();
-
 	noArrow = isExpanded || noArrow;
 
 	useEffect( () => {
@@ -330,6 +329,10 @@ const Popover = ( {
 				)?.parentNode;
 			}
 
+			const usedContentSize = ! contentSize.height
+				? contentRef.current.getBoundingClientRect()
+				: contentSize;
+
 			const {
 				popoverTop,
 				popoverLeft,
@@ -339,7 +342,7 @@ const Popover = ( {
 				contentWidth,
 			} = computePopoverPosition(
 				anchor,
-				contentSize,
+				usedContentSize,
 				position,
 				__unstableSticky,
 				containerRef.current,

diff --git a/packages/e2e-test-utils/src/transform-block-to.js b/packages/e2e-test-utils/src/transform-block-to.js
@@ -19,6 +19,9 @@ export async function transformBlockTo( name ) {
 		visible: true,
 	} );
 	await switcherToggle.click();
+	await page.waitForSelector( '.block-editor-block-switcher__container', {
+		visible: true,
+	} );
 
 	// Find the block button option within the switcher popover.
 	const xpath = `//*[contains(@class, "block-editor-block-switcher__popover")]//button[.='${ name }']`;