Use useLayoutEffect to compute the popover position (#23312)

WordPress · Jun 19, 2020 · d10ce4c · d10ce4c
1 parent 6f9217d
commit d10ce4c
Showing 1 changed file with 7 additions and 2 deletions.
diff --git 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 );