From bd8436f9f94656e8adc00dc1fdb3bbc6307f00af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Fri, 6 Dec 2019 11:44:12 +0100 Subject: [PATCH] Popover: fix inserter glitch (#18955) * Popover: fix inserter glitch * Do not recalc content height * Fix tests --- .../link-control/test/__snapshots__/index.js.snap | 2 +- packages/components/src/popover/index.js | 15 +++++++++------ .../src/popover/test/__snapshots__/index.js.snap | 10 ++-------- 3 files changed, 12 insertions(+), 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 index 8686ba2b135cc..a3c7de7bd7661 100644 --- 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`] = `"
"`; +exports[`Basic rendering should display with required props 1`] = `"
"`; diff --git a/packages/components/src/popover/index.js b/packages/components/src/popover/index.js index a0562ad1f0263..e9887a8dd69d0 100644 --- 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,10 +286,10 @@ const Popover = ( { anchorHorizontalBuffer ); - const contentSize = { - height: contentEl.scrollHeight, - width: contentEl.scrollWidth, - }; + if ( ! contentRect.current ) { + contentRect.current = contentEl.getBoundingClientRect(); + } + const { popoverTop, popoverLeft, @@ -296,7 +297,7 @@ const Popover = ( { 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 index cb1d263c4aa0f..236ae2a713293 100644 --- 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`] = `