From c77929384b64aca76c10b3abf952ef6aa79e3405 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Fri, 8 Nov 2024 15:01:49 +0800
Subject: [PATCH] fix: trigger open logic

---
 docs/examples/portal.tsx |  5 +++++
 src/Popup/index.tsx      |  3 +++
 src/index.tsx            | 12 +++++++++++-
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/docs/examples/portal.tsx b/docs/examples/portal.tsx
index 9f330c18..a1b66576 100644
--- a/docs/examples/portal.tsx
+++ b/docs/examples/portal.tsx
@@ -44,6 +44,8 @@ const PortalPopup = () =>
       style={popupBorderStyle}
       onMouseDown={(e) => {
         console.log('Portal Down', e);
+        e.stopPropagation();
+        e.preventDefault();
       }}
     >
       i am a portal element
@@ -84,6 +86,9 @@ const Test = () => {
             <PortalPopup />
           </div>
         }
+        onPopupVisibleChange={(visible) => {
+          console.log('visible change:', visible);
+        }}
       >
         <button>Click Me</button>
       </Trigger>
diff --git a/src/Popup/index.tsx b/src/Popup/index.tsx
index e5d64d42..a1052ab2 100644
--- a/src/Popup/index.tsx
+++ b/src/Popup/index.tsx
@@ -20,6 +20,7 @@ export interface PopupProps {
   onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
   onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
   onPointerEnter?: React.MouseEventHandler<HTMLDivElement>;
+  onMouseDownCapture?: React.MouseEventHandler<HTMLDivElement>;
   zIndex?: number;
 
   mask?: boolean;
@@ -105,6 +106,7 @@ const Popup = React.forwardRef<HTMLDivElement, PopupProps>((props, ref) => {
     onMouseEnter,
     onMouseLeave,
     onPointerEnter,
+    onMouseDownCapture,
 
     ready,
     offsetX,
@@ -255,6 +257,7 @@ const Popup = React.forwardRef<HTMLDivElement, PopupProps>((props, ref) => {
                     onMouseLeave={onMouseLeave}
                     onPointerEnter={onPointerEnter}
                     onClick={onClick}
+                    onMouseDownCapture={onMouseDownCapture}
                   >
                     {arrow && (
                       <Arrow
diff --git a/src/index.tsx b/src/index.tsx
index dce5f96e..7a85dc9d 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -381,7 +381,9 @@ export function generateTrigger(
       React.useState<VoidFunction>(null);
 
     // =========================== Align ============================
-    const [mousePos, setMousePos] = React.useState<[x: number, y: number] | null>(null);
+    const [mousePos, setMousePos] = React.useState<
+      [x: number, y: number] | null
+    >(null);
 
     const setMousePosByEvent = (
       event: Pick<React.MouseEvent, 'clientX' | 'clientY'>,
@@ -720,6 +722,14 @@ export function generateTrigger(
             fresh={fresh}
             // Click
             onClick={onPopupClick}
+            onMouseDownCapture={() => {
+              // Additional check for click to hide
+              // Since `createPortal` will not included in the popup element
+              // So we use capture to handle this
+              if (clickToHide) {
+                triggerOpen(true);
+              }
+            }}
             // Mask
             mask={mask}
             // Motion