diff --git a/packages/components/src/popover/index.js b/packages/components/src/popover/index.js index a97c964e06597..74aeef76d5206 100644 --- a/packages/components/src/popover/index.js +++ b/packages/components/src/popover/index.js @@ -360,9 +360,6 @@ const Popover = ( { // Height may still adjust between now and the next tick. const timeoutId = window.setTimeout( refresh ); - const refreshOnAnimationFrame = () => { - window.requestAnimationFrame( refresh ); - }; /* * There are sometimes we need to reposition or resize the popover that @@ -373,6 +370,13 @@ const Popover = ( { */ const intervalHandle = window.setInterval( refresh, 500 ); + let rafId; + + const refreshOnAnimationFrame = () => { + window.cancelAnimationFrame( rafId ); + rafId = window.requestAnimationFrame( refresh ); + }; + // Sometimes a click trigger a layout change that affects the popover // position. This is an opportunity to immediately refresh rather than // at the interval. @@ -398,6 +402,7 @@ const Popover = ( { window.removeEventListener( 'resize', refresh ); window.removeEventListener( 'scroll', refresh, true ); window.addEventListener( 'click', refreshOnAnimationFrame ); + window.cancelAnimationFrame( rafId ); if ( observer ) { observer.disconnect();