fix(Popup): close previous popup when moving to another nested component

Author: RylanBot

packages/components/popup/Popup.tsx

@@ -112,6 +112,7 @@ const Popup = forwardRef<PopupInstanceFunctions, PopupProps>((originalProps, ref
 
   const { triggerElementIsString, getTriggerElement, getTriggerNode, getPopupProps } = useTrigger({
     triggerElement,
+    popupElement,
     content,
     disabled,
     trigger,

packages/components/popup/__tests__/popup.test.tsx

@@ -264,62 +264,6 @@ describe('Popup 组件测试', () => {
     expect(popupContainer).toBeNull();
   });
 
-  test('测试浮层嵌套', async () => {
-    const wrappedTriggerElement = '嵌套触发元素';
-    const wrappedPopupTestId = 'wrapped-popup-test-id';
-    const wrappedPopupText = '嵌套弹出层内容';
-    const { getByText, queryByTestId } = render(
-      <Popup
-        placement="top"
-        trigger="click"
-        destroyOnClose
-        content={
-          <Popup
-            placement="top"
-            trigger="click"
-            destroyOnClose
-            content={<div data-testid={wrappedPopupTestId}>{wrappedPopupText}</div>}
-          >
-            <div data-testid={popupTestId}>{wrappedTriggerElement}</div>
-          </Popup>
-        }
-      >
-        {triggerElement}
-      </Popup>,
-    );
-
-    // 初始时，所有浮层都不存在
-    const popupElement1 = await waitFor(() => queryByTestId(popupTestId));
-    const wrappedPopupElement1 = await waitFor(() => queryByTestId(wrappedPopupTestId));
-    expect(popupElement1).toBeNull();
-    expect(wrappedPopupElement1).toBeNull();
-
-    // 触发浮层和嵌套浮层
-    act(() => {
-      fireEvent.click(getByText(triggerElement));
-    });
-    act(() => {
-      fireEvent.click(getByText(wrappedTriggerElement));
-    });
-
-    // 所有浮层都展示出来
-    const popupElement2 = await waitFor(() => queryByTestId(popupTestId));
-    const wrappedPopupElement2 = await waitFor(() => queryByTestId(wrappedPopupTestId));
-    expect(popupElement2).not.toBeNull();
-    expect(wrappedPopupElement2).not.toBeNull();
-
-    // 嵌套元素的浮层触发 mouseDown，不应该关闭任何浮层
-    act(() => {
-      fireEvent.mouseDown(queryByTestId(wrappedPopupTestId));
-    });
-
-    // 所有浮层都展示出来
-    const popupElement3 = await waitFor(() => queryByTestId(popupTestId));
-    const wrappedPopupElement3 = await waitFor(() => queryByTestId(wrappedPopupTestId));
-    expect(popupElement3).not.toBeNull();
-    expect(wrappedPopupElement3).not.toBeNull();
-  });
-
   test('异常情况：浮层隐藏时点击其他地方，浮层不可以展示出来', async () => {
     const testClassName = 'test-class-name';
     render(
@@ -395,3 +339,107 @@ describe('Popup 组件测试', () => {
     });
   });
 });
+
+describe('Popup 嵌套组件测试', () => {
+  const popupTestId = 'popup-test-id';
+  const wrappedPopupTestId = 'wrapped-popup-test-id';
+  const triggerElement = '外层触发元素';
+  const wrappedTriggerElement = '内层触发元素';
+  const wrappedPopupText = '内层浮层内容';
+
+  const renderNestedPopup = (trigger: 'click' | 'hover') =>
+    render(
+      <Popup
+        placement="top"
+        trigger={trigger}
+        destroyOnClose
+        content={
+          <Popup
+            placement="top"
+            trigger={trigger}
+            destroyOnClose
+            content={<div data-testid={wrappedPopupTestId}>{wrappedPopupText}</div>}
+          >
+            <div data-testid={popupTestId}>{wrappedTriggerElement}</div>
+          </Popup>
+        }
+      >
+        {triggerElement}
+      </Popup>,
+    );
+
+  test('trigger="click"', async () => {
+    const { getByText, queryByTestId } = renderNestedPopup('click');
+
+    // 初始状态，浮层不存在
+    expect(queryByTestId(popupTestId)).toBeNull();
+    expect(queryByTestId(wrappedPopupTestId)).toBeNull();
+
+    // click 外层触发器
+    act(() => {
+      fireEvent.click(getByText(triggerElement));
+    });
+    const popupElement = await waitFor(() => queryByTestId(popupTestId));
+    expect(popupElement).not.toBeNull();
+
+    // click 内层触发器
+    act(() => {
+      fireEvent.click(getByText(wrappedTriggerElement));
+    });
+    const wrappedPopupElement = await waitFor(() => queryByTestId(wrappedPopupTestId));
+    expect(wrappedPopupElement).not.toBeNull();
+    expect(wrappedPopupElement).toHaveTextContent(wrappedPopupText);
+
+    // mouseDown 内层内容不关闭
+    act(() => {
+      fireEvent.mouseDown(queryByTestId(wrappedPopupTestId) as HTMLElement);
+    });
+    await waitFor(() => {
+      expect(popupElement).not.toBeNull();
+      expect(wrappedPopupElement).not.toBeNull();
+    });
+  });
+
+  test('trigger="hover"', async () => {
+    const { getByText, getByTestId, queryByTestId } = renderNestedPopup('hover');
+
+    // 初始状态，浮层不存在
+    expect(queryByTestId(popupTestId)).toBeNull();
+    expect(queryByTestId(wrappedPopupTestId)).toBeNull();
+
+    // hover 外层触发器
+    act(() => {
+      fireEvent.mouseEnter(getByText(triggerElement));
+    });
+    const popupElement = await waitFor(() => queryByTestId(popupTestId));
+    expect(popupElement).not.toBeNull();
+
+    // hover 内层触发器
+    act(() => {
+      fireEvent.mouseEnter(getByTestId(popupTestId));
+    });
+    const wrappedPopupElement = await waitFor(() => queryByTestId(wrappedPopupTestId));
+    expect(wrappedPopupElement).not.toBeNull();
+    expect(wrappedPopupElement).toHaveTextContent(wrappedPopupText);
+
+    // mouseLeave 内层触发器
+    act(() => {
+      fireEvent.mouseLeave(getByTestId(popupTestId));
+    });
+
+    // 等待内层浮层销毁
+    await waitFor(() => {
+      expect(queryByTestId(wrappedPopupTestId)).toBeNull();
+    });
+
+    // mouseLeave 外层触发器
+    act(() => {
+      fireEvent.mouseLeave(getByText(triggerElement));
+    });
+
+    // 等待外层浮层销毁
+    await waitFor(() => {
+      expect(queryByTestId(popupTestId)).toBeNull();
+    });
+  });
+});

packages/components/popup/hooks/useTrigger.tsx

@@ -13,7 +13,16 @@ const isEventFromDisabledElement = (e: Event | React.SyntheticEvent, container:
   return !!(disabledEl && container.contains(disabledEl));
 };
 
-export default function useTrigger({ triggerElement, content, disabled, trigger, visible, onVisibleChange, delay }) {
+export default function useTrigger({
+  triggerElement,
+  content,
+  disabled,
+  trigger,
+  visible,
+  onVisibleChange,
+  delay,
+  popupElement,
+}) {
   const { classPrefix } = useConfig();
 
   const triggerElementIsString = typeof triggerElement === 'string';
@@ -53,8 +62,8 @@ export default function useTrigger({ triggerElement, content, disabled, trigger,
   const handleMouseLeave = (e: MouseEvent | React.MouseEvent) => {
     if (trigger !== 'hover' || hasPopupMouseDown.current) return;
     const relatedTarget = e.relatedTarget as HTMLElement;
-    const isMovingToContent = relatedTarget?.closest?.(`.${classPrefix}-popup`);
-    if (isMovingToContent) return;
+    const isMovingToCurrentPopup = relatedTarget && popupElement && popupElement.contains(relatedTarget);
+    if (isMovingToCurrentPopup) return;
     callFuncWithDelay({
       delay: exitDelay,
       callback: () => onVisibleChange(false, { e, trigger: 'trigger-element-hover' }),

packages/tdesign-react/CHANGELOG.md

@@ -10,7 +10,7 @@ spline: explain
 ### 🚀 Features
 
 - `DatePicker`: `presets` 支持 ReactNode，用于完全自定义渲染 @uyarn ([#4089](https://github.com/Tencent/tdesign-react/pull/4089))
-- `Dialog`:  @RylanBot ([#3950](https://github.com/Tencent/tdesign-react/pull/3950))
+- `Dialog`: @RylanBot ([#3950](https://github.com/Tencent/tdesign-react/pull/3950))
   - 支持 `mode="full-screen"` 的弹窗
   - 支持 `draggable` 在 `mode="modeless"` 生效
 - `Form`: 支持 `getFieldsValue` 和 `getFieldValue` 返回未渲染的数值 @RylanBot ([#4050](https://github.com/Tencent/tdesign-react/pull/4050))
@@ -34,7 +34,6 @@ spline: explain
 - `InputNumber`: 修复大数计算前导零被错误清除的问题 @Liumingxun ([common#2394](https://github.com/Tencent/tdesign-common/pull/2394))
 - `Menu`: 优化 Safari 浏览器中点击展开图标没有变换方向的问题 @liweijie0812 ([#4056](https://github.com/Tencent/tdesign-react/pull/4056))
 - `Popup`: 
-  - 修复嵌套场景下，外层弹窗隐藏时，内层弹窗无法正常关闭的问题 @RylanBot ([#4085](https://github.com/Tencent/tdesign-react/pull/4085))
   - 修复 `triggerElement` 被 `disabled` 的场景下，`hover` 时无法正常显示弹出层的问题 @RylanBot ([#4085](https://github.com/Tencent/tdesign-react/pull/4085))
   - 修复 `content` 动态修改时，箭头位置不稳定的问题 @RylanBot ([#4062](https://github.com/Tencent/tdesign-react/pull/4062))
 - `Select`: