Popover: allow scrolling over

WordPress · Jul 6, 2020 · 96c0434 · 96c0434
1 parent 71c07ea
commit 96c0434
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 20 deletions.
diff --git a/packages/block-editor/src/components/block-list/insertion-point.js b/packages/block-editor/src/components/block-list/insertion-point.js
@@ -157,7 +157,6 @@ export default function InsertionPoint( {
 					focusOnMount={ false }
 					className="block-editor-block-list__insertion-point-popover"
 					__unstableSlotName="block-toolbar"
-					__unstableFixedPosition={ false }
 				>
 					<div
 						className="block-editor-block-list__insertion-point"

diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
@@ -669,6 +669,7 @@
 
 .block-editor-block-list__insertion-point-popover.is-without-arrow {
 	z-index: z-index(".block-editor-block-list__insertion-point-popover");
+	position: absolute;
 
 	.components-popover__content.components-popover__content { // Needs specificity.
 		background: none;
@@ -681,6 +682,7 @@
 
 .components-popover.block-editor-block-list__block-popover {
 	z-index: z-index(".block-editor-block-list__block-popover");
+	position: absolute;
 
 	.components-popover__content {
 		margin: 0 !important;

diff --git a/packages/components/src/popover/index.js b/packages/components/src/popover/index.js
@@ -62,7 +62,12 @@ function computeAnchorRect(
 	}
 
 	if ( anchorRef !== false ) {
-		if ( ! anchorRef ) {
+		if (
+			! anchorRef ||
+			! window.Range ||
+			! window.Element ||
+			! window.DOMRect
+		) {
 			return;
 		}
 
@@ -256,7 +261,6 @@ const Popover = ( {
 	__unstableSticky,
 	__unstableSlotName = SLOT_NAME,
 	__unstableObserveElement,
-	__unstableFixedPosition = true,
 	__unstableBoundaryParent,
 	/* eslint-enable no-unused-vars */
 	...contentProps
@@ -281,7 +285,6 @@ const Popover = ( {
 			setStyle( containerRef.current, 'left' );
 			setStyle( contentRef.current, 'maxHeight' );
 			setStyle( contentRef.current, 'maxWidth' );
-			setStyle( containerRef.current, 'position' );
 			return;
 		}
 
@@ -302,17 +305,16 @@ const Popover = ( {
 				return;
 			}
 
+			const { offsetParent, ownerDocument } = containerRef.current;
+
 			let relativeOffsetTop = 0;
 
 			// If there is a positioned ancestor element that is not the body,
 			// subtract the position from the anchor rect. If the position of
 			// the popover is fixed, the offset parent is null or the body
 			// element, in which case the position is relative to the viewport.
 			// See https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent
-			if ( ! __unstableFixedPosition ) {
-				setStyle( containerRef.current, 'position', 'absolute' );
-
-				const { offsetParent } = containerRef.current;
+			if ( offsetParent && offsetParent !== ownerDocument.body ) {
 				const offsetParentRect = offsetParent.getBoundingClientRect();
 
 				relativeOffsetTop = offsetParentRect.top;
@@ -322,8 +324,6 @@ const Popover = ( {
 					anchor.width,
 					anchor.height
 				);
-			} else {
-				setStyle( containerRef.current, 'position' );
 			}
 
 			let boundaryElement;
@@ -396,8 +396,7 @@ const Popover = ( {
 			setAnimateOrigin( animateXAxis + ' ' + animateYAxis );
 		};
 
-		// Height may still adjust between now and the next tick.
-		const timeoutId = window.setTimeout( refresh );
+		refresh();
 
 		/*
 		 * There are sometimes we need to reposition or resize the popover that
@@ -430,7 +429,6 @@ const Popover = ( {
 		}
 
 		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
@@ -8,8 +8,11 @@ exports[`Popover should pass additional props to portaled element 1`] = `
     <div>
       <div>
         <div
-          class="components-popover is-without-arrow"
+          class="components-popover components-animate__appear is-from-top is-from-left is-without-arrow"
+          data-x-axis="right"
+          data-y-axis="bottom"
           role="tooltip"
+          style="top: 0px; left: 0px;"
         >
           <div
             class="components-popover__content"
@@ -36,7 +39,10 @@ exports[`Popover should render content 1`] = `
     <div>
       <div>
         <div
-          class="components-popover is-without-arrow"
+          class="components-popover components-animate__appear is-from-top is-from-left is-without-arrow"
+          data-x-axis="right"
+          data-y-axis="bottom"
+          style="top: 0px; left: 0px;"
         >
           <div
             class="components-popover__content"

diff --git a/packages/components/src/popover/utils.js b/packages/components/src/popover/utils.js
@@ -166,14 +166,12 @@ export function computePopoverYAxisPosition(
 		const scrollContainerEl =
 			getScrollContainer( anchorRef ) || document.body;
 		const scrollRect = scrollContainerEl.getBoundingClientRect();
+		const stickyPosition = scrollRect.top + height - relativeOffsetTop;
 
-		if ( anchorRect.top - height <= scrollRect.top ) {
+		if ( anchorRect.top <= stickyPosition ) {
 			return {
 				yAxis,
-				popoverTop: Math.min(
-					anchorRect.bottom - relativeOffsetTop,
-					scrollRect.top + height - relativeOffsetTop
-				),
+				popoverTop: Math.min( anchorRect.bottom, stickyPosition ),
 			};
 		}
 	}