From 35886c67293908ffa0121ba37afd9d0b2e43bfdb Mon Sep 17 00:00:00 2001
From: zernonia <59365435+zernonia@users.noreply.github.com>
Date: Tue, 13 Aug 2024 09:49:23 +0800
Subject: [PATCH] fix(NavigationMenu): client-side nav was prevented by
 RouterLink (#1221)

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

* chore: emit originalEvent
---
 .../src/NavigationMenu/NavigationMenuItem.vue |  4 ++++
 .../src/NavigationMenu/NavigationMenuLink.vue | 20 +++++++++++--------
 .../radix-vue/src/NavigationMenu/utils.ts     |  1 +
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuItem.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuItem.vue
index 9779ec4e3..5dc2f1cea 100644
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuItem.vue
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuItem.vue
@@ -113,6 +113,10 @@ function handleKeydown(ev: KeyboardEvent) {
     i.parentElement?.hasAttribute('data-menu-item'),
   )
 
+  // prevent triggering when the focus is on link
+  if (!itemsArray.includes(currentFocus))
+    return
+
   const newSelectedElement = useArrowNavigation(ev, currentFocus, undefined, {
     itemsArray,
     loop: false,
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuLink.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuLink.vue
index 7a0217c49..7290c41be 100644
--- 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: CustomEvent<{ originalEvent: Event }>]
 }
 export interface NavigationMenuLinkProps extends PrimitiveProps {
   /** Used to identify the link as the currently active page. */
@@ -17,11 +17,8 @@ export interface NavigationMenuLinkProps extends PrimitiveProps {
 </script>
 
 <script setup lang="ts">
-import { nextTick } from 'vue'
 import { Primitive } from '@/Primitive'
-import { EVENT_ROOT_CONTENT_DISMISS } from './utils'
-
-// const LINK_SELECT = "navigationMenu.linkSelect";
+import { EVENT_ROOT_CONTENT_DISMISS, LINK_SELECT } from './utils'
 
 const props = withDefaults(defineProps<NavigationMenuLinkProps>(), {
   as: 'a',
@@ -29,11 +26,18 @@ const props = withDefaults(defineProps<NavigationMenuLinkProps>(), {
 const emits = defineEmits<NavigationMenuLinkEmits>()
 
 useForwardExpose()
+
 async function handleClick(ev: MouseEvent) {
-  emits('select', ev)
+  const linkSelectEvent = new CustomEvent(LINK_SELECT, {
+    bubbles: true,
+    cancelable: true,
+    detail: {
+      originalEvent: ev,
+    },
+  })
+  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
index 07d507ca8..ac47267c3 100644
--- 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'
 
 /**