fix(NavigationMenu): ignore inactive content dismiss (#2637)

yan-ad · coderabbitai[bot] · web-flow · commit 67a7b1104113 · 2026-05-22T12:29:45.000+08:00
* fix(NavigationMenu): ignore inactive content dismiss

* test(NavigationMenu): fully cover the multi-content bug scenario.

Co-authored-by: coderabbitai[bot] &lt;136622811+coderabbitai[bot]@users.noreply.github.com&gt;

---------

Co-authored-by: coderabbitai[bot] &lt;136622811+coderabbitai[bot]@users.noreply.github.com&gt;
diff --git a/packages/core/src/NavigationMenu/NavigationMenu.test.ts b/packages/core/src/NavigationMenu/NavigationMenu.test.ts
@@ -7,8 +7,9 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { axe } from 'vitest-axe'
 import { nextTick } from 'vue'
 import { sleep } from '@/test'
-import NavigationMenuItem from './NavigationMenuItem.vue'
+import NavigationMenuUnmountOnHideFalse from './__test__/NavigationMenuUnmountOnHideFalse.vue'
 
+import NavigationMenuItem from './NavigationMenuItem.vue'
 import NavigationMenu from './story/_NavigationMenu.vue'
 
 vi.mock('@vueuse/core', async () => {
@@ -102,6 +103,33 @@ describe('given default NavigationMenu', () => {
     // })
   })
 
+  it('keeps active content open when clicking inside with unmountOnHide disabled', async () => {
+    const wrapper = mount(NavigationMenuUnmountOnHideFalse, { attachTo: document.body })
+
+    await wrapper.find('[data-testid="trigger-one"]').trigger('click')
+    await wrapper.vm.$nextTick()
+    await sleep(0)
+
+    expect(wrapper.find('[data-testid="model-value"]').text()).toBe('one')
+
+    // Open second content; first stays mounted but becomes inactive
+    await wrapper.find('[data-testid="trigger-two"]').trigger('click')
+    await wrapper.vm.$nextTick()
+    await sleep(0)
+
+    expect(wrapper.find('[data-testid="model-value"]').text()).toBe('two')
+
+    // Click inside active content-two; inactive content-one should not interfere
+    await fireEvent.pointerDown(wrapper.find('[data-testid="inside-two"]').element)
+    await wrapper.vm.$nextTick()
+    await sleep(0)
+
+    // Content-two should remain open (content-one's dismiss handler returned early)
+    expect(wrapper.find('[data-testid="model-value"]').text()).toBe('two')
+
+    wrapper.unmount()
+  })
+
   describe('menu triggers', () => {
     const findMenuItem = () => wrapper.findComponent(NavigationMenuItem)
 
diff --git a/packages/core/src/NavigationMenu/NavigationMenuContentImpl.vue b/packages/core/src/NavigationMenu/NavigationMenuContentImpl.vue
@@ -180,6 +180,9 @@ function handleKeydown(ev: KeyboardEvent) {
 }
 
 function handleDismiss() {
+  if (menuContext.modelValue.value !== itemContext.value)
+    return
+
   const rootContentDismissEvent = new Event(EVENT_ROOT_CONTENT_DISMISS, {
     bubbles: true,
     cancelable: true,
diff --git a/packages/core/src/NavigationMenu/__test__/NavigationMenuUnmountOnHideFalse.vue b/packages/core/src/NavigationMenu/__test__/NavigationMenuUnmountOnHideFalse.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuList,
+  NavigationMenuRoot,
+  NavigationMenuTrigger,
+} from '..'
+
+const modelValue = ref('')
+</script>
+
+<template>
+  <NavigationMenuRoot
+    v-model="modelValue"
+    :unmount-on-hide="false"
+    :disable-hover-trigger="true"
+  >
+    <span data-testid="model-value">{{ modelValue }}</span>
+    <NavigationMenuList>
+      <NavigationMenuItem value="one">
+        <NavigationMenuTrigger data-testid="trigger-one">
+          One
+        </NavigationMenuTrigger>
+        <NavigationMenuContent data-testid="content-one">
+          <button data-testid="inside-one">
+            Inside one
+          </button>
+        </NavigationMenuContent>
+      </NavigationMenuItem>
+
+      <NavigationMenuItem value="two">
+        <NavigationMenuTrigger data-testid="trigger-two">
+          Two
+        </NavigationMenuTrigger>
+        <NavigationMenuContent data-testid="content-two">
+          <button data-testid="inside-two">
+            Inside two
+          </button>
+        </NavigationMenuContent>
+      </NavigationMenuItem>
+    </NavigationMenuList>
+  </NavigationMenuRoot>
+</template>

Original file line number	Diff line number	Diff line change
`@@ -180,6 +180,9 @@ function handleKeydown(ev: KeyboardEvent) {`
`180`	`180`	`}`
`181`	`181`
`182`	`182`	`function handleDismiss() {`
	`183`	`+ if (menuContext.modelValue.value !== itemContext.value)`
	`184`	`+ return`
	`185`	`+`
`183`	`186`	`const rootContentDismissEvent = new Event(EVENT_ROOT_CONTENT_DISMISS, {`
`184`	`187`	`bubbles: true,`
`185`	`188`	`cancelable: true,`