fix(Popup): element is incorrectly closed

packages/components/guide/__tests__/__snapshots__/vitest-guide.test.jsx.snap

@@ -113,7 +113,7 @@ exports[`Guide Component > GuideStep.body works fine 1`] = `
   />
   <div
     class="t-portal-wrapper appear appear-active"
-    style="position: absolute; width: 100%;"
+    style="position: absolute; top: 0px; left: 0px; width: 100%;"
   >
     <div
       class="t-popup t-guide__popup t-popup--animation-enter-active t-popup--animation-enter-to"
@@ -292,7 +292,7 @@ exports[`Guide Component > GuideStep.children works fine 1`] = `
   />
   <div
     class="t-portal-wrapper appear appear-active"
-    style="position: absolute; width: 100%;"
+    style="position: absolute; top: 0px; left: 0px; width: 100%;"
   >
     <div
       class="t-popup t-guide__popup t-popup--animation-enter-active t-popup--animation-enter-to"
@@ -430,7 +430,7 @@ exports[`Guide Component > GuideStep.content works fine 1`] = `
   />
   <div
     class="t-portal-wrapper appear appear-active"
-    style="position: absolute; width: 100%;"
+    style="position: absolute; top: 0px; left: 0px; width: 100%;"
   >
     <div
       class="t-popup t-guide__popup t-popup--animation-enter-active t-popup--animation-enter-to"
@@ -575,7 +575,7 @@ exports[`Guide Component > GuideStep.highlightContent works fine 1`] = `
   />
   <div
     class="t-portal-wrapper appear appear-active"
-    style="position: absolute; width: 100%;"
+    style="position: absolute; top: 0px; left: 0px; width: 100%;"
   >
     <div
       class="t-popup t-guide__popup t-popup--animation-enter-active t-popup--animation-enter-to"
@@ -946,7 +946,7 @@ exports[`Guide Component > GuideStep.placement is equal to bottom-left 1`] = `
   />
   <div
     class="t-portal-wrapper appear appear-active"
-    style="position: absolute; width: 100%;"
+    style="position: absolute; top: 0px; left: 0px; width: 100%;"
   >
     <div
       class="t-popup t-guide__popup t-popup--animation-enter-active t-popup--animation-enter-to"
@@ -1121,7 +1121,7 @@ exports[`Guide Component > GuideStep.stepOverlayClass is equal to t-test-guide-s
   />
   <div
     class="t-portal-wrapper appear appear-active"
-    style="position: absolute; width: 100%;"
+    style="position: absolute; top: 0px; left: 0px; width: 100%;"
   >
     <div
       class="t-popup t-guide__popup t-test-guide-step-overlay t-popup--animation-enter-active t-popup--animation-enter-to"
@@ -1296,7 +1296,7 @@ exports[`Guide Component > GuideStep.title works fine 1`] = `
   />
   <div
     class="t-portal-wrapper appear appear-active"
-    style="position: absolute; width: 100%;"
+    style="position: absolute; top: 0px; left: 0px; width: 100%;"
   >
     <div
       class="t-popup t-guide__popup t-popup--animation-enter-active t-popup--animation-enter-to"

packages/components/popup/Popup.tsx

@@ -208,7 +208,7 @@ const Popup = forwardRef<PopupInstanceFunctions, PopupProps>((originalProps, ref
         ref={portalRef}
         triggerNode={triggerEl}
         attach={popupAttach}
-        style={{ position: 'absolute', width: '100%' }}
+        style={{ position: 'absolute', top: 0, left: 0, width: '100%' }}
       >
         <CSSTransition
           appear

packages/components/popup/hooks/useTrigger.tsx

@@ -45,19 +45,21 @@ export default function useTrigger({ triggerElement, content, disabled, trigger,
   }, [triggerElementIsString, triggerElement]);
 
   const handleMouseLeave = (e: MouseEvent | React.MouseEvent) => {
-    if (trigger === 'hover') {
-      const relatedTarget = e.relatedTarget as HTMLElement;
-      const isMovingToContent = relatedTarget?.closest?.(`.${classPrefix}-popup`);
-      if (isMovingToContent) return;
-      callFuncWithDelay({
-        delay: exitDelay,
-        callback: () => onVisibleChange(false, { e, trigger: 'trigger-element-hover' }),
-      });
-    }
+    if (trigger !== 'hover' || hasPopupMouseDown.current) return;
+    const relatedTarget = e.relatedTarget as HTMLElement;
+    const isMovingToContent = relatedTarget?.closest?.(`.${classPrefix}-popup`);
+    if (isMovingToContent) return;
+    callFuncWithDelay({
+      delay: exitDelay,
+      callback: () => onVisibleChange(false, { e, trigger: 'trigger-element-hover' }),
+    });
   };
 
   const handlePopupMouseDown = () => {
     hasPopupMouseDown.current = true;
+  };
+
+  const handlePopupMouseUp = () => {
     requestAnimationFrame(() => {
       hasPopupMouseDown.current = false;
     });
@@ -218,7 +220,9 @@ export default function useTrigger({ triggerElement, content, disabled, trigger,
     return {
       onMouseLeave: handleMouseLeave,
       onMouseDown: handlePopupMouseDown,
-      onTouchEnd: handlePopupMouseDown,
+      onMouseUp: handlePopupMouseUp,
+      onTouchStart: handlePopupMouseDown,
+      onTouchEnd: handlePopupMouseUp,
     };
   }
 

packages/tdesign-react/.changelog/pr-4046.md

@@ -0,0 +1,7 @@
+---
+pr_number: 4046
+contributor: RylanBot
+---
+
+- fix(Popup): 修复 `1.16.0` 版本的重构导致开启 `'trigger='hover'` 且外部元素动态更新时，弹窗意外被关闭的问题 @RylanBot ([#4046](https://github.com/Tencent/tdesign-react/pull/4046))
+- fix(Popup): 修复 `1.16.0` 版本的重构导致弹窗在某些场景下位置不稳定的问题 @xiaody @RylanBot ([#4046](https://github.com/Tencent/tdesign-react/pull/4046))