Format Library: Try to fix highlight popover jumping (#54736)

WordPress · Sep 27, 2023 · 8d1f3f4 · 8d1f3f4 · github-actions · Sep 27, 2023
1 parent 0340997
commit 8d1f3f4
Showing 1 changed file with 7 additions and 6 deletions.
diff --git a/packages/format-library/src/text-color/inline.js b/packages/format-library/src/text-color/inline.js
@@ -137,19 +137,20 @@ export default function InlineColorUI( {
 	onClose,
 	contentRef,
 } ) {
+	const popoverAnchor = useAnchor( {
+		editableContentElement: contentRef.current,
+		settings,
+	} );
+
 	/*
 	 As you change the text color by typing a HEX value into a field,
 	 the return value of document.getSelection jumps to the field you're editing,
 	 not the highlighted text. Given that useAnchor uses document.getSelection,
 	 it will return null, since it can't find the <mark> element within the HEX input.
 	 This caches the last truthy value of the selection anchor reference.
 	 */
-	const popoverAnchor = useCachedTruthy(
-		useAnchor( {
-			editableContentElement: contentRef.current,
-			settings,
-		} )
-	);
+	const cachedRect = useCachedTruthy( popoverAnchor.getBoundingClientRect() );
+	popoverAnchor.getBoundingClientRect = () => cachedRect;
 
 	return (
 		<Popover