fix(menu): fix the issue where submenus do not collapse correctly after the parent menu is closed (#6121)

* fix(Submenu): add popupVisible to TdSubMenuInterface and update provide logic

* fix(Submenu): refactor imports and clean up unused code

* fix(Submenu): improve popup visibility handling and add current popup check

* fix(Submenu): refactor popup visibility logic and improve timer handling

* fix(Submenu): remove popupVisible from TdSubMenuInterface

* fix(Submenu): optimize popup visibility handling and clean up timers

* fix(Submenu): enhance popup closing logic to prevent premature closure

* fix(Submenu): add cancelHideTimer method to TdSubMenuInterface for better timer management

* fix(Submenu): remove redundant loopInPopup function to simplify popup logic

* fix(husky): remove unnecessary check for terminal input

* chore: import order

* fix(Submenu): refactor timer management to use clearTimers function and add cleanup on unmount

* chore: stash changelog [ci skip]

---------

Co-authored-by: wū yāng <[email protected]>
Co-authored-by: tdesign-bot <[email protected]>

Author: 3 people

packages/components/menu/submenu.tsx

@@ -5,6 +5,7 @@ import {
   ref,
   provide,
   onMounted,
+  onBeforeUnmount,
   getCurrentInstance,
   watch,
   Slots,
@@ -13,13 +14,15 @@ import {
   nextTick,
   Transition,
 } from 'vue';
+import { isFunction } from 'lodash-es';
+import { useRipple, useContent, useTNodeJSX, usePrefixClass, useCollapseAnimation } from '@tdesign/shared-hooks';
+
 import props from './submenu-props';
 import { TdMenuInterface, TdSubMenuInterface, TdMenuItem } from './types';
 import FakeArrow from '../common-components/fake-arrow';
-import { useRipple, useContent, useTNodeJSX, usePrefixClass, useCollapseAnimation } from '@tdesign/shared-hooks';
 
 import { Popup, PopupPlacement } from '../popup';
-import { isFunction } from 'lodash-es';
+
 import { TdSubmenuProps } from './type';
 
 export default defineComponent({
@@ -36,7 +39,7 @@ export default defineComponent({
     const { theme, activeValues, expandValues, isHead, open } = menu;
 
     const submenu = inject<TdSubMenuInterface>('TdSubmenu', {});
-    const { setSubPopup, closeParentPopup } = submenu;
+    const { setSubPopup, closeParentPopup, cancelHideTimer } = submenu;
 
     const mode = computed(() => attrs.expandType || menu.mode.value);
 
@@ -59,6 +62,21 @@ export default defineComponent({
     const transitionClass = usePrefixClass('slide-down');
     useRipple(submenuRef, rippleColor);
 
+    // 存储 setTimeout 的 timer ID，用于清除定时器
+    const showTimer = ref<ReturnType<typeof setTimeout> | null>(null);
+    const hideTimer = ref<ReturnType<typeof setTimeout> | null>(null);
+
+    const clearTimers = () => {
+      if (showTimer.value !== null) {
+        clearTimeout(showTimer.value);
+        showTimer.value = null;
+      }
+      if (hideTimer.value !== null) {
+        clearTimeout(hideTimer.value);
+        hideTimer.value = null;
+      }
+    };
+
     const classes = computed(() => [
       `${classPrefix.value}-submenu`,
       {
@@ -114,9 +132,33 @@ export default defineComponent({
           subPopupRef.value = ref;
         },
         closeParentPopup: (e: MouseEvent) => {
-          const related = e.relatedTarget as HTMLElement;
-          if (loopInPopup(related)) return;
-          handleMouseLeavePopup(e);
+          // 不再检查 relatedTarget，直接触发父级的延迟隐藏
+          // 如果鼠标真的停留在父级，父级的 handleEnterPopup 会取消定时器
+          // 如果鼠标继续离开，定时器会触发隐藏
+
+          clearTimers();
+
+          // 设置父级的延迟隐藏
+          hideTimer.value = setTimeout(() => {
+            popupVisible.value = false;
+            hideTimer.value = null;
+          }, 100);
+
+          // 继续通知上级父级
+          if (isFunction(closeParentPopup)) {
+            closeParentPopup(e);
+          }
+        },
+        cancelHideTimer: () => {
+          // 取消当前级别的隐藏定时器
+          if (hideTimer.value !== null) {
+            clearTimeout(hideTimer.value);
+            hideTimer.value = null;
+          }
+          // 递归取消所有父级的隐藏定时器
+          if (isFunction(cancelHideTimer)) {
+            cancelHideTimer();
+          }
         },
       }),
     );
@@ -130,7 +172,15 @@ export default defineComponent({
     // methods
     const handleMouseEnter = () => {
       if (props.disabled) return;
-      setTimeout(() => {
+
+      clearTimers();
+
+      // 通知父级取消隐藏定时器
+      if (isFunction(cancelHideTimer)) {
+        cancelHideTimer();
+      }
+
+      showTimer.value = setTimeout(() => {
         if (!popupVisible.value) {
           open(props.value);
 
@@ -140,22 +190,22 @@ export default defineComponent({
           });
         }
         popupVisible.value = true;
+        showTimer.value = null;
       }, 0);
     };
 
     const targetInPopup = (el: HTMLElement) => el?.classList.contains(`${classPrefix.value}-menu__popup`);
-    const loopInPopup = (el: HTMLElement): boolean => {
-      if (!el) return false;
-      return targetInPopup(el) || loopInPopup(el.parentElement);
-    };
 
     const handleMouseLeave = (e: MouseEvent) => {
-      setTimeout(() => {
+      clearTimers();
+
+      hideTimer.value = setTimeout(() => {
         const inPopup = targetInPopup(e.relatedTarget as HTMLElement);
 
         if (isCursorInPopup.value || inPopup) return;
         popupVisible.value = false;
-      }, 0);
+        hideTimer.value = null;
+      }, 100);
     };
 
     const handleMouseLeavePopup = (e: any) => {
@@ -172,13 +222,31 @@ export default defineComponent({
       isCursorInPopup.value = false;
 
       if (!isSubmenu(target)) {
-        popupVisible.value = false;
-      }
+        clearTimers();
 
-      closeParentPopup?.(e);
+        // 使用延迟隐藏，避免在子项之间移动时闪烁
+        hideTimer.value = setTimeout(() => {
+          popupVisible.value = false;
+          hideTimer.value = null;
+        }, 100);
+
+        // 立即通知父级也开始延迟隐藏
+        closeParentPopup?.(e);
+      }
     };
     const handleEnterPopup = () => {
       isCursorInPopup.value = true;
+
+      // 进入 popup 时清除隐藏定时器
+      if (hideTimer.value !== null) {
+        clearTimeout(hideTimer.value);
+        hideTimer.value = null;
+      }
+
+      // 通知父级取消隐藏定时器
+      if (isFunction(cancelHideTimer)) {
+        cancelHideTimer();
+      }
     };
 
     const handleSubmenuItemClick = () => {
@@ -330,6 +398,11 @@ export default defineComponent({
       }
     });
 
+    // Cleanup timers on unmount to prevent memory leaks
+    onBeforeUnmount(() => {
+      clearTimers();
+    });
+
     return () => {
       let child = null;
       let events = {};

packages/components/menu/types.ts

@@ -28,4 +28,5 @@ export interface TdSubMenuInterface {
   addMenuItem?: (item: TdMenuItem) => void;
   setSubPopup?: (popupRef: HTMLElement) => void;
   closeParentPopup?: (e: MouseEvent) => void;
+  cancelHideTimer?: () => void;
 }

packages/tdesign-vue-next/.changelog/pr-6121.md

@@ -0,0 +1,6 @@
+---
+pr_number: 6121
+contributor: RSS1102
+---
+
+- fix(menu): 修复快速操作菜单时，父菜单关闭后子菜单未正确收起的问题 @RSS1102 ([#6121](https://github.com/Tencent/tdesign-vue-next/pull/6121))