fix(NavigationMenu): pointerEvent closing content premature (#749)

radix-vue · Mar 11, 2024 · 0c14fdc · 0c14fdc
1 parent 17099af
commit 0c14fdc
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 13 deletions.
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuContent.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuContent.vue
@@ -1,5 +1,4 @@
 <script lang="ts">
-import type { PointerDownOutsideEvent } from '@/DismissableLayer'
 import type { NavigationMenuContentImplEmits, NavigationMenuContentImplProps } from './NavigationMenuContentImpl.vue'
 
 export type NavigationMenuContentEmits = NavigationMenuContentImplEmits
@@ -17,7 +16,7 @@ export interface NavigationMenuContentProps extends NavigationMenuContentImplPro
 import { computed } from 'vue'
 import { injectNavigationMenuContext } from './NavigationMenuRoot.vue'
 import { injectNavigationMenuItemContext } from './NavigationMenuItem.vue'
-import { getOpenState } from './utils'
+import { getOpenState, whenMouse } from './utils'
 import { Presence } from '@/Presence'
 import NavigationMenuContentImpl from './NavigationMenuContentImpl.vue'
 import { useEmitAsProps, useForwardExpose } from '@/shared'
@@ -46,12 +45,6 @@ const isLastActiveValue = computed(() => {
     return (menuContext.previousValue.value === itemContext.value)
   return false
 })
-
-function handlePointerDown(ev: PointerDownOutsideEvent) {
-  emits('pointerDownOutside', ev)
-  if (!ev.preventDefault)
-    menuContext.onContentLeave()
-}
 </script>
 
 <template>
@@ -65,8 +58,8 @@ function handlePointerDown(ev: PointerDownOutsideEvent) {
         }"
         v-bind="{ ...$attrs, ...props, ...emitsAsProps }"
         @pointerenter="menuContext.onContentEnter(itemContext.value)"
-        @pointerleave="menuContext.onContentLeave()"
-        @pointerdown="handlePointerDown"
+        @pointerleave="whenMouse(() => menuContext.onContentLeave())"
+        @pointer-down-outside="emits('pointerDownOutside', $event)"
         @focus-outside="emits('focusOutside', $event)"
         @interact-outside="emits('interactOutside', $event)"
       >

diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuContentImpl.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuContentImpl.vue
@@ -100,7 +100,7 @@ function handlePointerDownOutside(ev: PointerDownOutsideEvent) {
       item.contains(target),
     )
     const isRootViewport
-      = menuContext.isRootMenu && menuContext.viewport.value?.contains(target)
+    = menuContext.isRootMenu && menuContext.viewport.value?.contains(target)
 
     if (isTrigger || isRootViewport || !menuContext.isRootMenu)
       ev.preventDefault()
@@ -112,6 +112,7 @@ watchEffect((cleanupFn) => {
   if (menuContext.isRootMenu && content) {
     // Bubble dismiss to the root content node and focus its trigger
     const handleClose = () => {
+      menuContext.onItemDismiss()
       itemContext.onRootContentClose()
       if (content.contains(document.activeElement))
         itemContext.triggerRef.value?.focus()

diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuViewport.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuViewport.vue
@@ -20,7 +20,7 @@ import {
 } from 'vue'
 import { useResizeObserver } from '@vueuse/core'
 import { injectNavigationMenuContext } from './NavigationMenuRoot.vue'
-import { getOpenState } from './utils'
+import { getOpenState, whenMouse } from './utils'
 import {
   Primitive,
 } from '@/Primitive'
@@ -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="menuContext.onContentLeave()"
+      @pointerleave="whenMouse(() => menuContext.onContentLeave())"
     >
       <slot />
     </Primitive>

diff --git a/packages/radix-vue/src/NavigationMenu/utils.ts b/packages/radix-vue/src/NavigationMenu/utils.ts
@@ -69,3 +69,7 @@ export function removeFromTabOrder(candidates: HTMLElement[]) {
     })
   }
 }
+
+export function whenMouse<E extends PointerEvent>(handler: (event?: E) => void) {
+  return (event: E) => (event.pointerType === 'mouse' ? handler(event) : undefined)
+}