diff --git a/apps/readest-app/src/app/reader/components/HeaderBar.tsx b/apps/readest-app/src/app/reader/components/HeaderBar.tsx index 7e446a37..f0ccd42d 100644 --- a/apps/readest-app/src/app/reader/components/HeaderBar.tsx +++ b/apps/readest-app/src/app/reader/components/HeaderBar.tsx @@ -1,5 +1,5 @@ import clsx from 'clsx'; -import React, { useEffect, useRef, useState } from 'react'; +import React, { useCallback, useEffect, useRef, useState } from 'react'; import { PiDotsThreeVerticalBold } from 'react-icons/pi'; import { Insets } from '@/types/misc'; @@ -83,6 +83,16 @@ const HeaderBar: React.FC = ({ // eslint-disable-next-line react-hooks/exhaustive-deps }, [appService, isSideBarVisible, hoveredBookKey]); + // Check if mouse is outside header area to avoid false positive event of MouseLeave when clicking inside header on Windows + const isMouseOutsideHeader = useCallback((clientX: number, clientY: number) => { + if (!headerRef.current) return true; + + const rect = headerRef.current.getBoundingClientRect(); + return ( + clientX <= rect.left || clientX >= rect.right || clientY <= rect.top || clientY >= rect.bottom + ); + }, []); + const isHeaderVisible = hoveredBookKey === bookKey || isDropdownOpen; const trafficLightInHeader = appService?.hasTrafficLight && !trafficLightInFullscreen && !isSideBarVisible && isTopLeft; @@ -129,7 +139,11 @@ const HeaderBar: React.FC = ({ ? `${Math.max(gridInsets.top, statusBarHeight)}px` : `${gridInsets.top}px`, }} - onMouseLeave={() => !appService?.isMobile && setHoveredBookKey('')} + onMouseLeave={(e) => { + if (!appService?.isMobile && isMouseOutsideHeader(e.clientX, e.clientY)) { + setHoveredBookKey(''); + } + }} >