fix: check mouse is in HoverCard

Bandmators · Mar 7, 2024 · e53c9ff · e53c9ff
1 parent 8f85a67
commit e53c9ff
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 12 deletions.
diff --git a/src/components/common/HoverCard/HoverCardToggle.tsx b/src/components/common/HoverCard/HoverCardToggle.tsx
@@ -17,11 +17,18 @@ export const HoverCardToggle = React.forwardRef<HTMLDivElement, React.ComponentP
     const compRef = React.useRef<HTMLDivElement | null>(null);
     const { onOpen: onOpenWaiting, onClose } = useHoverWaiting();
 
-    const onOpen = () => {
+    React.useEffect(() => {
       if (compRef.current) {
         const rect = compRef.current;
         setToggleElment(rect);
       }
+    }, [setToggleElment]);
+
+    const onOpen = () => {
+      // if (compRef.current) {
+      //   const rect = compRef.current;
+      //   setToggleElment(rect);
+      // }
 
       onOpenWaiting();
     };

diff --git a/src/components/common/HoverCard/useHoverWaiting.ts b/src/components/common/HoverCard/useHoverWaiting.ts
@@ -1,4 +1,5 @@
-// import * as React from 'react';
+import React from 'react';
+
 import { PortalContext } from '@/components/portal/PortalContext';
 import useContext from '@/hooks/useContext';
 
@@ -7,6 +8,7 @@ import HoverCardContext from './HoverCardContext';
 const useHoverWaiting = () => {
   const { timer, openDelay, closeDelay } = useContext(HoverCardContext);
   const { showModal, setShowModal } = useContext(PortalContext);
+  const [isIn, setIsIn] = React.useState<boolean>(false);
 
   const onOpen = () => {
     if (timer.current !== null) {
@@ -21,6 +23,8 @@ const useHoverWaiting = () => {
         timer.current = null;
       }, openDelay);
     }
+
+    setIsIn(true);
   };
 
   const onClose = () => {
@@ -30,18 +34,13 @@ const useHoverWaiting = () => {
 
         timer.current = null;
       }, closeDelay);
+    } else if (isIn && timer.current) {
+      clearTimeout(timer.current);
+      timer.current = null;
     }
+    setIsIn(false);
   };
 
-  //   React.useEffect(() => {
-  //     return () => {
-  //       if (timer !== null) {
-  //         clearTimeout(timer);
-  //         timer = null;
-  //       }
-  //     };
-  //   }, []);
-
   return { onOpen, onClose };
 };
 export default useHoverWaiting;
diff --git a/src/components/portal/PortalContent.tsx b/src/components/portal/PortalContent.tsx
@@ -30,7 +30,7 @@ export const PortalContent = ({ children, ref, width, disabledBG = false, ...pro
       {showModal &&
         createPortal(
           <>
-            {!disabledBG && <ModalBG onClick={close} className="bmates-modal-bg" />}
+            {!disabledBG && <ModalBG onClick={close} id="bmates-portal-bg" className="bmates-portal-bg" />}
             <Modal
               ref={composeRefs(modalRef, ref)}
               width={width || toggleElement?.getBoundingClientRect().width}