Skip to content

fix(NavigationMenu): ignore inactive content dismiss#2637

Merged
zernonia merged 2 commits into
unovue:v2from
yan-ad:fix/navigation-menu-mounted-dismiss
May 22, 2026
Merged

fix(NavigationMenu): ignore inactive content dismiss#2637
zernonia merged 2 commits into
unovue:v2from
yan-ad:fix/navigation-menu-mounted-dismiss

Conversation

@yan-ad

@yan-ad yan-ad commented May 12, 2026

Copy link
Copy Markdown
Contributor

🔗 Linked issue

Closes #2608

❓ Type of change

  • 📖 Documentation (updates to the documentation, readme or JSdoc annotations)
  • 🐞 Bug fix (a non-breaking change that fixes an issue)
  • 👌 Enhancement (improving an existing functionality like performance)
  • ✨ New feature (a non-breaking change that adds functionality)
  • 🧹 Chore (updates to the build process or auxiliary tools and libraries)
  • ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

This fixes an issue where NavigationMenu can dismiss the currently active content incorrectly when unmountOnHide is set to false.

With unmountOnHide={false}, multiple NavigationMenuContent instances can remain mounted at the same time. An inactive content’s DismissableLayer can still dispatch a dismiss event, which causes the root menu state to clear even though the event did not come from the active item.

This PR updates the dismiss handler so inactive NavigationMenuContent instances ignore dismiss events. Only the currently active item is allowed to trigger the root dismiss behavior.

It also adds a regression fixture and test covering the multiple-mounted-content case.

📸 Screenshots (if appropriate)

N/A — behavior-only bug fix covered by regression test.

📝 Checklist

  • I have linked an issue or discussion.
  • I have updated the documentation accordingly.

Summary by CodeRabbit

  • Bug Fixes

    • Prevented incorrect menu dismissals by ensuring the active menu content isn’t closed when switching items in certain configurations, improving menu stability.
  • Tests

    • Added a new test fixture and test to validate menu behavior when content is preserved (unmount-on-hide disabled), ensuring reliable interactions across menu switches.

Review Change Stack

@pkg-pr-new

pkg-pr-new Bot commented May 12, 2026

Copy link
Copy Markdown

Open in StackBlitz

npm i https://pkg.pr.new/reka-ui@2637

commit: 834511d

@coderabbitai

coderabbitai Bot commented May 12, 2026

Copy link
Copy Markdown
Contributor

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 4771e749-59f3-44fe-9ad5-1aec136d81cd

📥 Commits

Reviewing files that changed from the base of the PR and between 90ca0ee and 834511d.

📒 Files selected for processing (1)
  • packages/core/src/NavigationMenu/NavigationMenu.test.ts
🚧 Files skipped from review as they are similar to previous changes (1)
  • packages/core/src/NavigationMenu/NavigationMenu.test.ts

📝 Walkthrough

Walkthrough

This PR guards NavigationMenuContentImpl.handleDismiss so it only dismisses when the component's item matches the menu's current modelValue, and adds a test fixture plus test to validate behavior when unmount-on-hide="false".

Changes

NavigationMenu Dismiss Guard and Validation

Layer / File(s) Summary
Dismiss guard for non-active content
packages/core/src/NavigationMenu/NavigationMenuContentImpl.vue
handleDismiss now returns early when menuContext.modelValue does not equal this content's itemContext.value, preventing inactive but mounted contents from dispatching a root dismiss.
Test fixture for unmount-on-hide=false
packages/core/src/NavigationMenu/__test__/NavigationMenuUnmountOnHideFalse.vue
New Vue SFC fixture with v-model modelValue, :unmount-on-hide="false", two navigation items (triggers and contents), and data-testid hooks for assertions.
Test case validating dismiss behavior
packages/core/src/NavigationMenu/NavigationMenu.test.ts
Imports the fixture, mounts it, opens a first item then a second, simulates pointer-down inside the active second content, and asserts the active content stays two.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

  • unovue/reka-ui#2392: Related changes to NavigationMenu dismissal behavior and root-level dismiss event flow.

Poem

🐰 In leafy code where dropdowns hide and rest,
A careful guard keeps only the active blessed.
Siblings mounted sleep on,
One pointer-down can't do them wrong—
A test and tweak, now menus nest.

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'fix(NavigationMenu): ignore inactive content dismiss' accurately describes the main change—guarding the dismiss handler to prevent inactive content from triggering dismissal.
Linked Issues check ✅ Passed The PR fully addresses the objectives from issue #2608: guards handleDismiss to ignore dismiss from inactive content (checks menuContext.modelValue !== itemContext.value), and adds regression test coverage.
Out of Scope Changes check ✅ Passed All changes are directly in-scope: the dismiss handler guard in NavigationMenuContentImpl.vue addresses the core bug, and new test files support regression coverage for the multi-mounted-content scenario.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/core/src/NavigationMenu/NavigationMenu.test.ts`:
- Around line 106-122: The test "keeps active content open when clicking inside
with unmountOnHide disabled" (using NavigationMenuUnmountOnHideFalse) only opens
one content and thus misses the multi-content dismiss-handler bug; update the
spec to open two contents so inactive-but-mounted content exists: trigger click
on '[data-testid="trigger-one"]', then open the second content via
'[data-testid="trigger-two"]' (ensuring unmountOnHide=false keeps the first
mounted), then fire a pointerDown inside the active content element
'[data-testid="inside-two"]' and assert '[data-testid="model-value"]' remains
'two'; this verifies inactive content's dismiss handler does not close the
active content.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 46fdd5e4-62f0-41f6-aecb-1fe440cbe855

📥 Commits

Reviewing files that changed from the base of the PR and between edbeb93 and 90ca0ee.

📒 Files selected for processing (3)
  • packages/core/src/NavigationMenu/NavigationMenu.test.ts
  • packages/core/src/NavigationMenu/NavigationMenuContentImpl.vue
  • packages/core/src/NavigationMenu/__test__/NavigationMenuUnmountOnHideFalse.vue

Comment thread packages/core/src/NavigationMenu/NavigationMenu.test.ts
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
@zernonia zernonia merged commit 67a7b11 into unovue:v2 May 22, 2026
7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: NavigationMenu: unmount-on-hide="false" causes all dropdowns except the last to close on any click

2 participants