fix(NavigationMenu): whenMouse not triggering (#770)

radix-vue · Mar 19, 2024 · 5a3acd7 · 5a3acd7
1 parent 68c9d29
commit 5a3acd7
Show file tree

Hide file tree

Showing 3 changed files with 2 additions and 5 deletions.
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuContent.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuContent.vue
@@ -60,7 +60,7 @@ const isLastActiveValue = computed(() => {
         }"
         v-bind="{ ...$attrs, ...props, ...emitsAsProps }"
         @pointerenter="menuContext.onContentEnter(itemContext.value)"
-        @pointerleave="whenMouse(() => menuContext.onContentLeave())"
+        @pointerleave="whenMouse(() => menuContext.onContentLeave())($event)"
         @pointer-down-outside="emits('pointerDownOutside', $event)"
         @focus-outside="emits('focusOutside', $event)"
         @interact-outside="emits('interactOutside', $event)"

diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuViewport.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuViewport.vue
@@ -85,7 +85,7 @@ useResizeObserver(content, () => {
         ['--radix-navigation-menu-viewport-height' as any]: size ? `${size?.height}px` : undefined,
       }"
       @pointerenter="menuContext.onContentEnter(menuContext.modelValue.value)"
-      @pointerleave="whenMouse(() => menuContext.onContentLeave())"
+      @pointerleave="whenMouse(() => menuContext.onContentLeave())($event)"
     >
       <slot />
     </Primitive>

diff --git a/packages/radix-vue/src/NavigationMenu/story/NavigationMenuDemo.story.vue b/packages/radix-vue/src/NavigationMenu/story/NavigationMenuDemo.story.vue
@@ -40,9 +40,6 @@ const currentTrigger = ref('')
               </NavigationMenuTrigger>
               <NavigationMenuContent
                 class="data-[motion=from-start]:animate-enterFromLeft data-[motion=from-end]:animate-enterFromRight data-[motion=to-start]:animate-exitToLeft data-[motion=to-end]:animate-exitToRight absolute top-0 left-0 w-full sm:w-auto"
-                @escape-key-down.prevent
-                @pointer-down-outside.prevent
-                @focus-outside.prevent
               >
                 <ul
                   class="one m-0 grid list-none gap-x-[10px] p-[22px] sm:w-[500px] sm:grid-cols-[0.75fr_1fr]"