From 32d104776351cb4bd4d0e1537a5d4275f3a7bf6f Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Fri, 19 Jun 2020 14:21:58 +0100
Subject: [PATCH] Use useLayoutEffect to compute the popover position

---
 packages/components/src/popover/index.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/popover/index.js b/packages/components/src/popover/index.js
index 5b528fda7fd11a..02ce49af77a35c 100644
--- a/packages/components/src/popover/index.js
+++ b/packages/components/src/popover/index.js
@@ -6,7 +6,12 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useRef, useState, useEffect } from '@wordpress/element';
+import {
+	useRef,
+	useState,
+	useEffect,
+	useLayoutEffect,
+} from '@wordpress/element';
 import { focus, getRectangleFromRange } from '@wordpress/dom';
 import { ESCAPE } from '@wordpress/keycodes';
 import deprecated from '@wordpress/deprecated';
@@ -267,7 +272,7 @@ const Popover = ( {
 	const [ containerResizeListener, contentSize ] = useResizeObserver();
 	noArrow = isExpanded || noArrow;
 
-	useEffect( () => {
+	useLayoutEffect( () => {
 		if ( isExpanded ) {
 			setClass( containerRef.current, 'is-without-arrow', noArrow );
 			setClass( containerRef.current, 'is-alternate', isAlternate );