fix(NavigationMenu): behavior should match radix ui navigation menu w… (#2667)

dbzx10299 · web-flow · commit 04799b617832 · 2026-05-30T15:29:55.000+08:00
* fix(NavigationMenu): behavior should match radix ui navigation menu when entering another trigger while menu is open

* chore: lint

* chore: add original comment back

* fix(navigation-menu): clear skipNextClose before content close

* test(NavigationMenu): add timing regression tests for trigger switching and content leave
diff --git a/packages/core/src/NavigationMenu/NavigationMenu.test.ts b/packages/core/src/NavigationMenu/NavigationMenu.test.ts
@@ -137,6 +137,11 @@ describe('given default NavigationMenu', () => {
 
     const findLinkContent = () => wrapper.find('[data-dismissable-layer]')
 
+    async function useRealDebounceFn() {
+      const { useDebounceFn: realUseDebounceFn } = await vi.importActual<typeof import('@vueuse/core')>('@vueuse/core')
+      vi.mocked(useDebounceFn).mockImplementation(realUseDebounceFn)
+    }
+
     it('should open menu on click by default', async () => {
       const button = findTriggerButton()
 
@@ -210,5 +215,58 @@ describe('given default NavigationMenu', () => {
       // Menu should be closed
       expect(findLinkContent().exists()).toBeFalsy()
     })
+
+    it('switching triggers keeps menu open', async () => {
+      vi.useFakeTimers()
+      await useRealDebounceFn()
+
+      const localWrapper = mount(NavigationMenu, { attachTo: document.body })
+      const triggers = localWrapper.findAll('[data-navigation-menu-trigger]')
+      const findContent = () => localWrapper.find('[data-dismissable-layer]')
+
+      await triggers[0].trigger('pointermove', { pointerType: 'mouse' })
+      await vi.advanceTimersByTimeAsync(200)
+      await nextTick()
+
+      expect(findContent().exists()).toBe(true)
+
+      await triggers[0].trigger('pointerleave', { pointerType: 'mouse' })
+      await triggers[1].trigger('pointermove', { pointerType: 'mouse' })
+      await nextTick()
+
+      expect(triggers[1].attributes('data-state')).toBe('open')
+      expect(findContent().exists()).toBe(true)
+
+      await vi.advanceTimersByTimeAsync(150)
+      await nextTick()
+
+      expect(findContent().exists()).toBe(true)
+
+      localWrapper.unmount()
+      vi.useRealTimers()
+    })
+
+    it('leaving content closes menu', async () => {
+      vi.useFakeTimers()
+      await useRealDebounceFn()
+
+      const localWrapper = mount(NavigationMenu, { attachTo: document.body })
+      const findContent = () => localWrapper.find('[data-dismissable-layer]')
+
+      await localWrapper.find('[data-navigation-menu-trigger]').trigger('pointermove', { pointerType: 'mouse' })
+      await vi.advanceTimersByTimeAsync(200)
+      await nextTick()
+
+      expect(findContent().exists()).toBe(true)
+
+      await findContent().trigger('pointerleave', { pointerType: 'mouse' })
+      await vi.advanceTimersByTimeAsync(150)
+      await nextTick()
+
+      expect(findContent().exists()).toBe(false)
+
+      localWrapper.unmount()
+      vi.useRealTimers()
+    })
   })
 })
diff --git a/packages/core/src/NavigationMenu/NavigationMenuRoot.vue b/packages/core/src/NavigationMenu/NavigationMenuRoot.vue
@@ -140,6 +140,7 @@ const { delayDuration, skipDelayDuration, dir: propDir, disableClickTrigger, dis
 const dir = useDirection(propDir)
 
 const isDelaySkipped = refAutoReset(false, skipDelayDuration)
+const skipNextClose = ref(false)
 const computedDelay = computed(() => {
   const isOpen = modelValue.value !== ''
   if (isOpen || isDelaySkipped.value)
@@ -150,8 +151,14 @@ const computedDelay = computed(() => {
 const debouncedFn = useDebounceFn((val?: string) => {
   // passing `undefined` meant to reset the debounce timer
   if (typeof val === 'string') {
+    if (val === '' && skipNextClose.value) {
+      skipNextClose.value = false
+      return
+    }
     previousValue.value = modelValue.value
     modelValue.value = val
+    if (val === '')
+      isDelaySkipped.value = true
   }
 }, computedDelay)
 
@@ -188,18 +195,27 @@ provideNavigationMenuContext({
     viewport.value = val
   },
   onTriggerEnter: (val) => {
-    debouncedFn(val)
+    if (modelValue.value !== '') {
+      skipNextClose.value = true
+      previousValue.value = modelValue.value
+      modelValue.value = val
+    }
+    else {
+      debouncedFn(val)
+    }
   },
   onTriggerLeave: () => {
-    isDelaySkipped.value = true
+    skipNextClose.value = false
     debouncedFn('')
   },
   onContentEnter: () => {
     debouncedFn()
   },
   onContentLeave: () => {
-    if (!props.disablePointerLeaveClose)
+    if (!props.disablePointerLeaveClose) {
+      skipNextClose.value = false
       debouncedFn('')
+    }
   },
   onItemSelect: (val) => {
     // When selecting item we trigger update immediately
