Popover: make sure that ownerDocument is always defined (#42886)

* Popover: make sure that ownerDocument is always defined * CHANGELOG * Remove unnecessary document fallback * Add unit test
WordPress · Aug 3, 2022 · 77ee6e4 · 77ee6e4
1 parent 2f7e2cd
commit 77ee6e4
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 11 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 ### Bug Fix
 
+-   `Popover`: make sure that `ownerDocument` is always defined ([#42886](https://github.com/WordPress/gutenberg/pull/42886)).
 -   `ExternalLink`: Check if the link is an internal anchor link and prevent anchor links from being opened. ([#42259](https://github.com/WordPress/gutenberg/pull/42259)).
 -   `BorderControl`: Ensure box-sizing is reset for the control ([#42754](https://github.com/WordPress/gutenberg/pull/42754)).
 -   `InputControl`: Fix acceptance of falsy values in controlled updates ([#42484](https://github.com/WordPress/gutenberg/pull/42484/)).

diff --git a/packages/components/src/popover/index.js b/packages/components/src/popover/index.js
@@ -162,25 +162,26 @@ const Popover = (
 		: placement;
 
 	const ownerDocument = useMemo( () => {
+		let documentToReturn;
+
 		if ( anchorRef?.top ) {
-			return anchorRef?.top.ownerDocument;
+			documentToReturn = anchorRef?.top.ownerDocument;
 		} else if ( anchorRef?.startContainer ) {
-			return anchorRef.startContainer.ownerDocument;
+			documentToReturn = anchorRef.startContainer.ownerDocument;
 		} else if ( anchorRef?.current ) {
-			return anchorRef.current.ownerDocument;
+			documentToReturn = anchorRef.current.ownerDocument;
 		} else if ( anchorRef ) {
 			// This one should be deprecated.
-			return anchorRef.ownerDocument;
+			documentToReturn = anchorRef.ownerDocument;
 		} else if ( anchorRect && anchorRect?.ownerDocument ) {
-			return anchorRect.ownerDocument;
+			documentToReturn = anchorRect.ownerDocument;
 		} else if ( getAnchorRect ) {
-			return (
-				getAnchorRect( anchorRefFallback.current )?.ownerDocument ??
-				document
-			);
+			documentToReturn = getAnchorRect(
+				anchorRefFallback.current
+			)?.ownerDocument;
 		}
 
-		return document;
+		return documentToReturn ?? document;
 	}, [ anchorRef, anchorRect, getAnchorRect ] );
 
 	/**

diff --git a/packages/components/src/popover/test/index.js b/packages/components/src/popover/test/index.js
@@ -1,7 +1,12 @@
 /**
  * External dependencies
  */
-import { act, render } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -44,4 +49,21 @@ describe( 'Popover', () => {
 
 		expect( result.container.querySelector( 'span' ) ).toMatchSnapshot();
 	} );
+
+	it( 'should render correctly when anchorRef is provided', () => {
+		const PopoverWithAnchor = ( args ) => {
+			const anchorRef = useRef( null );
+
+			return (
+				<div>
+					<p ref={ anchorRef }>Anchor</p>
+					<Popover { ...args } anchorRef={ anchorRef } />
+				</div>
+			);
+		};
+
+		render( <PopoverWithAnchor>Popover content</PopoverWithAnchor> );
+
+		expect( screen.getByText( 'Popover content' ) ).toBeInTheDocument();
+	} );
 } );