diff --git a/services/web/frontend/js/features/source-editor/components/review-panel/entries/aggregate-change-entry.tsx b/services/web/frontend/js/features/source-editor/components/review-panel/entries/aggregate-change-entry.tsx index cc5bd89a9f..be186dd2af 100644 --- a/services/web/frontend/js/features/source-editor/components/review-panel/entries/aggregate-change-entry.tsx +++ b/services/web/frontend/js/features/source-editor/components/review-panel/entries/aggregate-change-entry.tsx @@ -37,7 +37,7 @@ function AggregateChangeEntry({ const { hoverCoords, indicatorRef, - handleEntryMouseLeave, + endHover, handleIndicatorMouseEnter, handleIndicatorClick, } = useIndicatorHover() @@ -84,7 +84,7 @@ function AggregateChangeEntry({ id={entryId} hoverCoords={hoverCoords} onClick={handleEntryClick} - onMouseLeave={handleEntryMouseLeave} + onMouseLeave={endHover} > {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
(null) - const handleEntryMouseLeave = () => { + const endHover = useCallback(() => { if (!reviewPanelOpen && !layoutToLeft) { // Use flushSync to ensure that React renders immediately. This is // necessary to ensure that the subsequent layout update acts on the @@ -29,7 +29,7 @@ function useIndicatorHover() { }) handleLayoutChange(true) } - } + }, [handleLayoutChange, layoutToLeft, reviewPanelOpen, setLayoutSuspended]) const handleIndicatorMouseEnter = () => { if (!layoutToLeft) { @@ -48,10 +48,20 @@ function useIndicatorHover() { toggleReviewPanel() } + useEffect(() => { + if (hoverCoords) { + window.addEventListener('editor:scroll', endHover) + + return () => { + window.removeEventListener('editor:scroll', endHover) + } + } + }, [hoverCoords, endHover]) + return { hoverCoords, indicatorRef, - handleEntryMouseLeave, + endHover, handleIndicatorMouseEnter, handleIndicatorClick, }