fix(NavigationMenu): client-side nav was prevented by RouterLink

unovue · Aug 12, 2024 · 690551a · 690551a
1 parent 12af841
commit 690551a
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuLink.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuLink.vue
@@ -8,7 +8,7 @@ export type NavigationMenuLinkEmits = {
    *
    * Calling `event.preventDefault` in this handler will prevent the navigation menu from closing when selecting that link.
    */
-  select: [payload: MouseEvent]
+  select: [payload: Event]
 }
 export interface NavigationMenuLinkProps extends PrimitiveProps {
   /** Used to identify the link as the currently active page. */
@@ -19,7 +19,7 @@ export interface NavigationMenuLinkProps extends PrimitiveProps {
 <script setup lang="ts">
 import { nextTick } from 'vue'
 import { Primitive } from '@/Primitive'
-import { EVENT_ROOT_CONTENT_DISMISS } from './utils'
+import { EVENT_ROOT_CONTENT_DISMISS, LINK_SELECT } from './utils'
 
 // const LINK_SELECT = "navigationMenu.linkSelect";
 
@@ -30,10 +30,13 @@ const emits = defineEmits<NavigationMenuLinkEmits>()
 
 useForwardExpose()
 async function handleClick(ev: MouseEvent) {
-  emits('select', ev)
+  const linkSelectEvent = new CustomEvent(LINK_SELECT, {
+    bubbles: true,
+    cancelable: true,
+  })
+  emits('select', linkSelectEvent)
 
-  await nextTick()
-  if (!ev.defaultPrevented && !ev.metaKey) {
+  if (!linkSelectEvent.defaultPrevented && !ev.metaKey) {
     const rootContentDismissEvent = new CustomEvent(
       EVENT_ROOT_CONTENT_DISMISS,
       {

diff --git a/packages/radix-vue/src/NavigationMenu/utils.ts b/packages/radix-vue/src/NavigationMenu/utils.ts
@@ -13,6 +13,7 @@ export function makeContentId(baseId: string, value: string) {
   return `${baseId}-content-${value}`
 }
 
+export const LINK_SELECT = 'navigationMenu.linkSelect'
 export const EVENT_ROOT_CONTENT_DISMISS = 'navigationMenu.rootContentDismiss'
 
 /**