Skip to content

Commit

Permalink
Format Library: Try to fix highlight popover jumping (#54736)
Browse files Browse the repository at this point in the history
  • Loading branch information
t-hamano authored and mikachan committed Sep 29, 2023
1 parent 1b53e1b commit 949b28c
Showing 1 changed file with 7 additions and 6 deletions.
13 changes: 7 additions & 6 deletions packages/format-library/src/text-color/inline.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit 949b28c

Please sign in to comment.