From 949b28c361f82a3594af99eef57228167a1e6ea9 Mon Sep 17 00:00:00 2001 From: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Date: Wed, 27 Sep 2023 20:42:49 +0900 Subject: [PATCH] Format Library: Try to fix highlight popover jumping (#54736) --- packages/format-library/src/text-color/inline.js | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/format-library/src/text-color/inline.js b/packages/format-library/src/text-color/inline.js index 7a2c2f92ea462c..f71c7766222582 100644 --- a/packages/format-library/src/text-color/inline.js +++ b/packages/format-library/src/text-color/inline.js @@ -137,6 +137,11 @@ 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, @@ -144,12 +149,8 @@ export default function InlineColorUI( { it will return null, since it can't find the 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 (