fix(ContextMenu): flash of closing and opening when interact with tri…

…gger
unovue · Nov 30, 2024 · 635b90e · 635b90e
1 parent 8f40689
commit 635b90e
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 2 deletions.
diff --git a/packages/core/src/ContextMenu/ContextMenuContent.vue b/packages/core/src/ContextMenu/ContextMenuContent.vue
@@ -66,6 +66,11 @@ const hasInteractedOutside = ref(false)
     "
     @interact-outside="
       (event) => {
+        const originalEvent = event.detail.originalEvent as PointerEvent
+        // Prevent closing when right click (button=2) with the trigger element
+        if (originalEvent.button === 2 && event.target === rootContext.triggerElement.value) {
+          event.preventDefault()
+        }
         if (!event.defaultPrevented && !rootContext.modal.value)
           hasInteractedOutside = true;
       }

diff --git a/packages/core/src/ContextMenu/ContextMenuRoot.vue b/packages/core/src/ContextMenu/ContextMenuRoot.vue
@@ -9,6 +9,7 @@ type ContextMenuRootContext = {
   onOpenChange: (open: boolean) => void
   modal: Ref<boolean>
   dir: Ref<Direction>
+  triggerElement: Ref<HTMLElement | undefined>
 }
 
 export interface ContextMenuRootProps extends Omit<MenuProps, 'open'> {}
@@ -35,6 +36,7 @@ useForwardExpose()
 const dir = useDirection(propDir)
 
 const open = ref(false)
+const triggerElement = ref<HTMLElement>()
 
 provideContextMenuRootContext({
   open,
@@ -43,6 +45,7 @@ provideContextMenuRootContext({
   },
   dir,
   modal,
+  triggerElement,
 })
 
 watch(open, (value) => {

diff --git a/packages/core/src/ContextMenu/ContextMenuTrigger.vue b/packages/core/src/ContextMenu/ContextMenuTrigger.vue
@@ -13,7 +13,7 @@ export interface ContextMenuTriggerProps extends PrimitiveProps {
 </script>
 
 <script setup lang="ts">
-import { computed, nextTick, ref, toRefs } from 'vue'
+import { computed, nextTick, onMounted, ref, toRefs } from 'vue'
 import { injectContextMenuRootContext } from './ContextMenuRoot.vue'
 import { isTouchOrPen } from './utils'
 import { useForwardExpose } from '@/shared'
@@ -30,7 +30,7 @@ const props = withDefaults(defineProps<ContextMenuTriggerProps>(), {
 })
 const { disabled } = toRefs(props)
 
-const { forwardRef } = useForwardExpose()
+const { forwardRef, currentElement } = useForwardExpose()
 const rootContext = injectContextMenuRootContext()
 const point = ref<Point>({ x: 0, y: 0 })
 const virtualEl = computed(() => ({
@@ -86,6 +86,12 @@ async function handlePointerEvent(event: PointerEvent) {
       clearLongPress()
   }
 }
+
+onMounted(() => {
+  if (currentElement.value) {
+    rootContext.triggerElement.value = currentElement.value
+  }
+})
 </script>
 
 <template>
@@ -102,6 +108,7 @@ async function handlePointerEvent(event: PointerEvent) {
     :data-disabled="disabled ? '' : undefined"
     :style="{
       WebkitTouchCallout: 'none',
+      pointerEvents: 'auto',
     }"
     v-bind="$attrs"
     @contextmenu="handleContextMenu"