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

* fix(NavigationMenu): client-side nav was prevented by RouterLink * chore: emit originalEvent
unovue · Aug 13, 2024 · 35886c6 · 35886c6
1 parent 5bef21d
commit 35886c6
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 8 deletions.
diff --git 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
@@ -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,23 +17,27 @@ 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',
 })
 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
@@ -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'
 
 /**
-Original file line number
+Diff line change
@@ Expand Up @@
       return `${baseId}-content-${value}`
     }
+    export const LINK_SELECT = 'navigationMenu.linkSelect'
     export const EVENT_ROOT_CONTENT_DISMISS = 'navigationMenu.rootContentDismiss'
     /**
@@ Expand Down @@