Popover: fix inserter glitch (#18955)

* Popover: fix inserter glitch * Do not recalc content height * Fix tests
WordPress · Dec 6, 2019 · bd8436f · bd8436f
1 parent c75761c
commit bd8436f
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 15 deletions.
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
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Basic rendering should display with required props 1`] = `"<span><div tabindex=\\"-1\\"><div><div><div class=\\"components-popover block-editor-link-control components-animate__appear is-from-top is-from-center\\" data-x-axis=\\"center\\" data-y-axis=\\"bottom\\" style=\\"top: 0px; left: 0px;\\"><div class=\\"components-popover__content\\" tabindex=\\"-1\\"><div class=\\"block-editor-link-control__popover-inner\\"><div class=\\"block-editor-link-control__search\\"><form><div class=\\"components-base-control editor-url-input block-editor-url-input block-editor-link-control__search-input\\"><div class=\\"components-base-control__field\\"><input type=\\"text\\" aria-label=\\"URL\\" required=\\"\\" placeholder=\\"Search or type url\\" role=\\"combobox\\" aria-expanded=\\"false\\" aria-autocomplete=\\"list\\" aria-owns=\\"block-editor-url-input-suggestions-0\\" value=\\"\\"></div></div><button type=\\"reset\\" disabled=\\"\\" aria-label=\\"Reset\\" class=\\"components-button components-icon-button block-editor-link-control__search-reset\\"><svg aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" class=\\"dashicon dashicons-no-alt\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 20 20\\"><path d=\\"M14.95 6.46L11.41 10l3.54 3.54-1.41 1.41L10 11.42l-3.53 3.53-1.42-1.42L8.58 10 5.05 6.47l1.42-1.42L10 8.58l3.54-3.53z\\"></path></svg></button></form></div></div></div></div></div></div></div></span>"`;
+exports[`Basic rendering should display with required props 1`] = `"<span><div tabindex=\\"-1\\"><div><div><div class=\\"components-popover block-editor-link-control\\"><div class=\\"components-popover__content\\" tabindex=\\"-1\\"><div class=\\"block-editor-link-control__popover-inner\\"><div class=\\"block-editor-link-control__search\\"><form><div class=\\"components-base-control editor-url-input block-editor-url-input block-editor-link-control__search-input\\"><div class=\\"components-base-control__field\\"><input type=\\"text\\" aria-label=\\"URL\\" required=\\"\\" placeholder=\\"Search or type url\\" role=\\"combobox\\" aria-expanded=\\"false\\" aria-autocomplete=\\"list\\" aria-owns=\\"block-editor-url-input-suggestions-0\\" value=\\"\\"></div></div><button type=\\"reset\\" disabled=\\"\\" aria-label=\\"Reset\\" class=\\"components-button components-icon-button block-editor-link-control__search-reset\\"><svg aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" class=\\"dashicon dashicons-no-alt\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 20 20\\"><path d=\\"M14.95 6.46L11.41 10l3.54 3.54-1.41 1.41L10 11.42l-3.53 3.53-1.42-1.42L8.58 10 5.05 6.47l1.42-1.42L10 8.58l3.54-3.53z\\"></path></svg></button></form></div></div></div></div></div></div></div></span>"`;
diff --git 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,18 +286,18 @@ const Popover = ( {
 				anchorHorizontalBuffer
 			);
 
-			const contentSize = {
-				height: contentEl.scrollHeight,
-				width: contentEl.scrollWidth,
-			};
+			if ( ! contentRect.current ) {
+				contentRect.current = contentEl.getBoundingClientRect();
+			}
+
 			const {
 				popoverTop,
 				popoverLeft,
 				xAxis,
 				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
@@ -8,11 +8,8 @@ exports[`Popover should pass additional props to portaled element 1`] = `
     <div>
       <div>
         <div
-          class="components-popover components-animate__appear is-from-top is-from-center"
-          data-x-axis="center"
-          data-y-axis="bottom"
+          class="components-popover"
           role="tooltip"
-          style="top: 0px; left: 0px;"
         >
           <div
             class="components-popover__content"
@@ -35,10 +32,7 @@ exports[`Popover should render content 1`] = `
     <div>
       <div>
         <div
-          class="components-popover components-animate__appear is-from-top is-from-center"
-          data-x-axis="center"
-          data-y-axis="bottom"
-          style="top: 0px; left: 0px;"
+          class="components-popover"
         >
           <div
             class="components-popover__content"