fix: trigger open logic

react-component · Nov 8, 2024 · c779293 · c779293
1 parent e976903
commit c779293
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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