Popover: pass missing anchor ref to the getAnchorRect callback prop (#…

…42076) * Popover: pass missing anchor ref to the getAnchorRef callback prop * CHANGELOG * Update packages/components/CHANGELOG.md Co-authored-by: Andrew Serong <14988353+andrewserong@users.noreply.github.com> * Move anchorRefFallback initialisation up * Pass anchorRefFallback.current to the second getAnchorRect call Co-authored-by: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
WordPress · Jul 5, 2022 · 5db966c · 5db966c
1 parent 434f412
commit 5db966c
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -12,6 +12,10 @@
 -   `FocalPointPicker` updated to satisfy `react/exhuastive-deps` eslint rule ([#41520](https://github.com/WordPress/gutenberg/pull/41520)).
 -   `ColorPicker` updated to satisfy `react/exhuastive-deps` eslint rule ([#41294](https://github.com/WordPress/gutenberg/pull/41294)).
 
+### Bug Fix
+
+-   `Popover`: pass missing anchor ref to the `getAnchorRect` callback prop. ([#42076](https://github.com/WordPress/gutenberg/pull/42076))
+
 ## 19.14.0 (2022-06-29)
 
 ### Bug Fix

diff --git a/packages/components/src/popover/index.js b/packages/components/src/popover/index.js
@@ -128,6 +128,7 @@ const Popover = (
 	}
 
 	const arrowRef = useRef( null );
+	const anchorRefFallback = useRef( null );
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const isExpanded = expandOnMobile && isMobileViewport;
 	const hasArrow = ! isExpanded && ! noArrow;
@@ -147,8 +148,11 @@ const Popover = (
 			return anchorRef.ownerDocument;
 		} else if ( anchorRect && anchorRect?.ownerDocument ) {
 			return anchorRect.ownerDocument;
-		} else if ( getAnchorRect ) {
-			return getAnchorRect()?.ownerDocument ?? document;
+		} else if ( getAnchorRect && anchorRefFallback.current ) {
+			return (
+				getAnchorRect( anchorRefFallback.current )?.ownerDocument ??
+				document
+			);
 		}
 
 		return document;
@@ -203,7 +207,6 @@ const Popover = (
 			: undefined,
 		hasArrow ? arrow( { element: arrowRef } ) : undefined,
 	].filter( ( m ) => !! m );
-	const anchorRefFallback = useRef( null );
 	const slotName = useContext( slotNameContext ) || __unstableSlotName;
 	const slot = useSlot( slotName );
 
@@ -272,10 +275,10 @@ const Popover = (
 					return anchorRect;
 				},
 			};
-		} else if ( getAnchorRect ) {
+		} else if ( getAnchorRect && anchorRefFallback.current ) {
 			usedRef = {
 				getBoundingClientRect() {
-					const rect = getAnchorRect();
+					const rect = getAnchorRect( anchorRefFallback.current );
 					return new window.DOMRect(
 						rect.x ?? rect.left,
 						rect.y ?? rect.top,