fix: dismiss queue history menus on pointerdown (#9749)

src/components/queue/job/JobContextMenu.test.ts

@@ -1,9 +1,54 @@
 import { mount } from '@vue/test-utils'
-import { describe, expect, it, vi } from 'vitest'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { defineComponent, nextTick } from 'vue'
 
 import JobContextMenu from '@/components/queue/job/JobContextMenu.vue'
 import type { MenuEntry } from '@/composables/queue/useJobMenu'
 
+const popoverStub = defineComponent({
+  name: 'Popover',
+  emits: ['show', 'hide'],
+  data() {
+    return {
+      visible: false,
+      container: null as HTMLElement | null,
+      eventTarget: null as EventTarget | null,
+      target: null as EventTarget | null
+    }
+  },
+  mounted() {
+    this.container = this.$refs.container as HTMLElement | null
+  },
+  updated() {
+    this.container = this.$refs.container as HTMLElement | null
+  },
+  methods: {
+    toggle(event: Event, target?: EventTarget | null) {
+      if (this.visible) {
+        this.hide()
+        return
+      }
+
+      this.show(event, target)
+    },
+    show(event: Event, target?: EventTarget | null) {
+      this.visible = true
+      this.eventTarget = event.currentTarget
+      this.target = target ?? event.currentTarget
+      this.$emit('show')
+    },
+    hide() {
+      this.visible = false
+      this.$emit('hide')
+    }
+  },
+  template: `
+    <div v-if="visible" ref="container" class="popover-stub">
+      <slot />
+    </div>
+  `
+})
+
 const buttonStub = {
   props: {
     disabled: {
@@ -37,31 +82,57 @@ const mountComponent = (entries: MenuEntry[]) =>
     props: { entries },
     global: {
       stubs: {
-        Popover: {
-          template: '<div class="popover-stub"><slot /></div>'
-        },
+        Popover: popoverStub,
         Button: buttonStub
       }
     }
   })
 
+const createTriggerEvent = (type: string, currentTarget: EventTarget) =>
+  ({
+    type,
+    currentTarget,
+    target: currentTarget
+  }) as Event
+
+const openMenu = async (
+  wrapper: ReturnType<typeof mountComponent>,
+  type: string = 'click'
+) => {
+  const trigger = document.createElement('button')
+  document.body.append(trigger)
+  await wrapper.vm.open(createTriggerEvent(type, trigger))
+  await nextTick()
+  return trigger
+}
+
+afterEach(() => {
+  document.body.innerHTML = ''
+})
+
 describe('JobContextMenu', () => {
-  it('passes disabled state to action buttons', () => {
+  it('passes disabled state to action buttons', async () => {
     const wrapper = mountComponent(createEntries())
+    await openMenu(wrapper)
 
     const buttons = wrapper.findAll('.button-stub')
     expect(buttons).toHaveLength(2)
     expect(buttons[0].attributes('data-disabled')).toBe('false')
     expect(buttons[1].attributes('data-disabled')).toBe('true')
+
+    wrapper.unmount()
   })
 
   it('emits action for enabled entries', async () => {
     const entries = createEntries()
     const wrapper = mountComponent(entries)
+    await openMenu(wrapper)
 
     await wrapper.findAll('.button-stub')[0].trigger('click')
 
     expect(wrapper.emitted('action')).toEqual([[entries[0]]])
+
+    wrapper.unmount()
   })
 
   it('does not emit action for disabled entries', async () => {
@@ -73,9 +144,52 @@ describe('JobContextMenu', () => {
         onClick: vi.fn()
       }
     ])
+    await openMenu(wrapper)
 
     await wrapper.get('.button-stub').trigger('click')
 
     expect(wrapper.emitted('action')).toBeUndefined()
+
+    wrapper.unmount()
+  })
+
+  it('hides on pointerdown outside the popover', async () => {
+    const wrapper = mountComponent(createEntries())
+    const trigger = document.createElement('button')
+    const outside = document.createElement('div')
+    document.body.append(trigger, outside)
+
+    await wrapper.vm.open(createTriggerEvent('contextmenu', trigger))
+    await nextTick()
+    expect(wrapper.find('.popover-stub').exists()).toBe(true)
+
+    outside.dispatchEvent(new Event('pointerdown', { bubbles: true }))
+    await nextTick()
+
+    expect(wrapper.find('.popover-stub').exists()).toBe(false)
+
+    wrapper.unmount()
+  })
+
+  it('keeps the menu open through trigger pointerdown and closes on same trigger click', async () => {
+    const wrapper = mountComponent(createEntries())
+    const trigger = document.createElement('button')
+    document.body.append(trigger)
+
+    await wrapper.vm.open(createTriggerEvent('click', trigger))
+    await nextTick()
+    expect(wrapper.find('.popover-stub').exists()).toBe(true)
+
+    trigger.dispatchEvent(new Event('pointerdown', { bubbles: true }))
+    await nextTick()
+
+    expect(wrapper.find('.popover-stub').exists()).toBe(true)
+
+    await wrapper.vm.open(createTriggerEvent('click', trigger))
+    await nextTick()
+
+    expect(wrapper.find('.popover-stub').exists()).toBe(false)
+
+    wrapper.unmount()
   })
 })

src/components/queue/job/JobContextMenu.vue

@@ -1,7 +1,7 @@
 <template>
   <Popover
     ref="jobItemPopoverRef"
-    :dismissable="true"
+    :dismissable="false"
     :close-on-escape="true"
     unstyled
     :pt="{
@@ -12,8 +12,11 @@
         ]
       }
     }"
+    @show="isVisible = true"
+    @hide="onHide"
   >
     <div
+      ref="contentRef"
       class="flex min-w-56 flex-col items-stretch rounded-lg border border-interface-stroke bg-interface-panel-surface px-2 py-3 font-inter"
     >
       <template v-for="entry in entries" :key="entry.key">
@@ -45,9 +48,10 @@
 
 <script setup lang="ts">
 import Popover from 'primevue/popover'
-import { ref } from 'vue'
+import { nextTick, ref } from 'vue'
 
 import Button from '@/components/ui/button/Button.vue'
+import { useDismissableOverlay } from '@/composables/useDismissableOverlay'
 import type { MenuEntry } from '@/composables/queue/useJobMenu'
 
 defineProps<{ entries: MenuEntry[] }>()
@@ -56,18 +60,55 @@ const emit = defineEmits<{
   (e: 'action', entry: MenuEntry): void
 }>()
 
-const jobItemPopoverRef = ref<InstanceType<typeof Popover> | null>(null)
+type PopoverHandle = {
+  hide: () => void
+  show: (event: Event, target?: EventTarget | null) => void
+}
 
-function open(event: Event) {
-  if (jobItemPopoverRef.value) {
-    jobItemPopoverRef.value.toggle(event)
+const jobItemPopoverRef = ref<PopoverHandle | null>(null)
+const contentRef = ref<HTMLElement | null>(null)
+const triggerRef = ref<HTMLElement | null>(null)
+const isVisible = ref(false)
+const openedByClick = ref(false)
+
+useDismissableOverlay({
+  isOpen: isVisible,
+  getOverlayEl: () => contentRef.value,
+  getTriggerEl: () => (openedByClick.value ? triggerRef.value : null),
+  onDismiss: hide
+})
+
+async function open(event: Event) {
+  const trigger =
+    event.currentTarget instanceof HTMLElement ? event.currentTarget : null
+  const isSameClickTrigger =
+    event.type === 'click' && trigger === triggerRef.value && isVisible.value
+
+  if (isSameClickTrigger) {
+    hide()
+    return
   }
+
+  openedByClick.value = event.type === 'click'
+  triggerRef.value = trigger
+
+  if (isVisible.value) {
+    hide()
+    await nextTick()
+  }
+
+  jobItemPopoverRef.value?.show(event, trigger)
 }
 
 function hide() {
   jobItemPopoverRef.value?.hide()
 }
 
+function onHide() {
+  isVisible.value = false
+  openedByClick.value = false
+}
+
 function onEntry(entry: MenuEntry) {
   if (entry.kind === 'divider' || entry.disabled) return
   emit('action', entry)

src/composables/useDismissableOverlay.test.ts

@@ -0,0 +1,108 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { effectScope, ref } from 'vue'
+import type { EffectScope, Ref } from 'vue'
+
+import { useDismissableOverlay } from '@/composables/useDismissableOverlay'
+
+describe('useDismissableOverlay', () => {
+  let scope: EffectScope | undefined
+  let isOpen: Ref<boolean>
+  let overlayEl: HTMLElement
+  let triggerEl: HTMLElement
+  let outsideEl: HTMLElement
+  let dismissCount: number
+
+  const mountComposable = ({
+    dismissOnScroll = false,
+    getTriggerEl
+  }: {
+    dismissOnScroll?: boolean
+    getTriggerEl?: () => HTMLElement | null
+  } = {}) => {
+    scope = effectScope()
+    scope.run(() =>
+      useDismissableOverlay({
+        isOpen,
+        getOverlayEl: () => overlayEl,
+        getTriggerEl,
+        onDismiss: () => {
+          dismissCount += 1
+        },
+        dismissOnScroll
+      })
+    )
+  }
+
+  beforeEach(() => {
+    isOpen = ref(true)
+    overlayEl = document.createElement('div')
+    triggerEl = document.createElement('button')
+    outsideEl = document.createElement('div')
+    dismissCount = 0
+    document.body.append(overlayEl, triggerEl, outsideEl)
+  })
+
+  afterEach(() => {
+    scope?.stop()
+    scope = undefined
+    document.body.innerHTML = ''
+  })
+
+  it('dismisses on outside pointerdown', () => {
+    mountComposable()
+
+    outsideEl.dispatchEvent(new Event('pointerdown', { bubbles: true }))
+
+    expect(dismissCount).toBe(1)
+  })
+
+  it('ignores pointerdown inside the overlay', () => {
+    mountComposable()
+
+    overlayEl.dispatchEvent(new Event('pointerdown', { bubbles: true }))
+
+    expect(dismissCount).toBe(0)
+  })
+
+  it('ignores pointerdown inside the trigger', () => {
+    mountComposable({
+      getTriggerEl: () => triggerEl
+    })
+
+    triggerEl.dispatchEvent(new Event('pointerdown', { bubbles: true }))
+
+    expect(dismissCount).toBe(0)
+  })
+
+  it('dismisses on scroll when enabled', () => {
+    mountComposable({
+      dismissOnScroll: true
+    })
+
+    window.dispatchEvent(new Event('scroll'))
+
+    expect(dismissCount).toBe(1)
+  })
+
+  it('ignores scroll inside the overlay', () => {
+    mountComposable({
+      dismissOnScroll: true
+    })
+
+    overlayEl.dispatchEvent(new Event('scroll'))
+
+    expect(dismissCount).toBe(0)
+  })
+
+  it('does not dismiss when closed', () => {
+    isOpen.value = false
+    mountComposable({
+      dismissOnScroll: true
+    })
+
+    outsideEl.dispatchEvent(new Event('pointerdown', { bubbles: true }))
+    window.dispatchEvent(new Event('scroll'))
+
+    expect(dismissCount).toBe(0)
+  })
+})

src/composables/useDismissableOverlay.ts

@@ -0,0 +1,60 @@
+import { useEventListener } from '@vueuse/core'
+
+import { toValue } from 'vue'
+import type { MaybeRefOrGetter } from 'vue'
+
+interface UseDismissableOverlayOptions {
+  isOpen: MaybeRefOrGetter<boolean>
+  getOverlayEl: () => HTMLElement | null
+  onDismiss: () => void
+  getTriggerEl?: () => HTMLElement | null
+  dismissOnScroll?: boolean
+}
+
+const isNode = (value: EventTarget | null | undefined): value is Node =>
+  value instanceof Node
+
+const isInside = (target: Node, element: HTMLElement | null | undefined) =>
+  !!element?.contains(target)
+
+export function useDismissableOverlay({
+  isOpen,
+  getOverlayEl,
+  onDismiss,
+  getTriggerEl,
+  dismissOnScroll = false
+}: UseDismissableOverlayOptions) {
+  const dismissIfOutside = (event: Event) => {
+    if (!toValue(isOpen)) {
+      return
+    }
+
+    const overlay = getOverlayEl()
+    if (!overlay) {
+      return
+    }
+
+    if (!isNode(event.target)) {
+      onDismiss()
+      return
+    }
+
+    if (
+      isInside(event.target, overlay) ||
+      isInside(event.target, getTriggerEl?.())
+    ) {
+      return
+    }
+
+    onDismiss()
+  }
+
+  useEventListener(window, 'pointerdown', dismissIfOutside, { capture: true })
+
+  if (dismissOnScroll) {
+    useEventListener(window, 'scroll', dismissIfOutside, {
+      capture: true,
+      passive: true
+    })
+  }
+}

src/platform/assets/components/MediaAssetContextMenu.test.ts

@@ -0,0 +1,143 @@
+import { mount } from '@vue/test-utils'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { defineComponent, nextTick } from 'vue'
+import type { ComponentPublicInstance } from 'vue'
+
+import MediaAssetContextMenu from '@/platform/assets/components/MediaAssetContextMenu.vue'
+import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    t: (key: string) => key
+  })
+}))
+
+vi.mock('@/platform/distribution/types', () => ({
+  isCloud: false
+}))
+
+vi.mock('@/platform/workflow/utils/workflowExtractionUtil', () => ({
+  supportsWorkflowMetadata: () => true
+}))
+
+vi.mock('@/utils/formatUtil', () => ({
+  isPreviewableMediaType: () => true
+}))
+
+vi.mock('@/utils/loaderNodeUtil', () => ({
+  detectNodeTypeFromFilename: () => ({ nodeType: 'LoadImage' })
+}))
+
+const mediaAssetActions = {
+  addWorkflow: vi.fn(),
+  downloadAsset: vi.fn(),
+  openWorkflow: vi.fn(),
+  exportWorkflow: vi.fn(),
+  copyJobId: vi.fn(),
+  deleteAssets: vi.fn().mockResolvedValue(false)
+}
+
+vi.mock('../composables/useMediaAssetActions', () => ({
+  useMediaAssetActions: () => mediaAssetActions
+}))
+
+const contextMenuStub = defineComponent({
+  name: 'ContextMenu',
+  props: {
+    pt: {
+      type: Object,
+      default: undefined
+    }
+  },
+  emits: ['hide'],
+  data() {
+    return {
+      visible: false
+    }
+  },
+  methods: {
+    show() {
+      this.visible = true
+    },
+    hide() {
+      this.visible = false
+      this.$emit('hide')
+    }
+  },
+  template: `
+    <div
+      v-if="visible"
+      class="context-menu-stub"
+      v-bind="pt?.root"
+    />
+  `
+})
+
+const asset: AssetItem = {
+  id: 'asset-1',
+  name: 'image.png',
+  tags: [],
+  user_metadata: {}
+}
+
+const buttonStub = {
+  template: '<div class="button-stub"><slot /></div>'
+}
+
+type MediaAssetContextMenuExposed = ComponentPublicInstance & {
+  show: (event: MouseEvent) => void
+}
+
+const mountComponent = () =>
+  mount(MediaAssetContextMenu, {
+    attachTo: document.body,
+    props: {
+      asset,
+      assetType: 'output',
+      fileKind: 'image'
+    },
+    global: {
+      stubs: {
+        ContextMenu: contextMenuStub,
+        Button: buttonStub
+      }
+    }
+  })
+
+async function showMenu(
+  wrapper: ReturnType<typeof mountComponent>
+): Promise<HTMLElement> {
+  const exposed = wrapper.vm as MediaAssetContextMenuExposed
+  const event = new MouseEvent('contextmenu', { bubbles: true })
+  exposed.show(event)
+  await nextTick()
+
+  return wrapper.get('.context-menu-stub').element as HTMLElement
+}
+
+afterEach(() => {
+  vi.clearAllMocks()
+  document.body.innerHTML = ''
+})
+
+describe('MediaAssetContextMenu', () => {
+  it('dismisses outside pointerdown using the rendered root id', async () => {
+    const wrapper = mountComponent()
+    const outside = document.createElement('div')
+    document.body.append(outside)
+
+    const menu = await showMenu(wrapper)
+    const menuId = menu.id
+
+    expect(menuId).not.toBe('')
+    expect(document.getElementById(menuId)).toBe(menu)
+
+    outside.dispatchEvent(new Event('pointerdown', { bubbles: true }))
+    await nextTick()
+
+    expect(wrapper.find('.context-menu-stub').exists()).toBe(false)
+    expect(wrapper.emitted('hide')).toEqual([[]])
+
+    wrapper.unmount()
+  })
+})

src/platform/assets/components/MediaAssetContextMenu.vue

@@ -4,6 +4,7 @@
     :model="contextMenuItems"
     :pt="{
       root: {
+        id: contextMenuId,
         class: cn(
           'rounded-lg',
           'bg-secondary-background text-base-foreground',
@@ -29,14 +30,13 @@
 </template>
 
 <script setup lang="ts">
-import { useEventListener } from '@vueuse/core'
 import ContextMenu from 'primevue/contextmenu'
 import type { MenuItem } from 'primevue/menuitem'
-import type { ComponentPublicInstance } from 'vue'
-import { computed, ref } from 'vue'
+import { computed, ref, useId } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import Button from '@/components/ui/button/Button.vue'
+import { useDismissableOverlay } from '@/composables/useDismissableOverlay'
 import { isCloud } from '@/platform/distribution/types'
 import { supportsWorkflowMetadata } from '@/platform/workflow/utils/workflowExtractionUtil'
 import { isPreviewableMediaType } from '@/utils/formatUtil'
@@ -74,34 +74,22 @@ const emit = defineEmits<{
   'bulk-export-workflow': [assets: AssetItem[]]
 }>()
 
-type ContextMenuInstance = ComponentPublicInstance & {
+type ContextMenuHandle = {
   show: (event: MouseEvent) => void
   hide: () => void
-  container?: HTMLElement
-  $el?: HTMLElement
 }
 
-const contextMenu = ref<ContextMenuInstance | null>(null)
+const contextMenu = ref<ContextMenuHandle | null>(null)
+const contextMenuId = useId()
 const isVisible = ref(false)
 const actions = useMediaAssetActions()
 const { t } = useI18n()
 
-function getOverlayEl(): HTMLElement | null {
-  return contextMenu.value?.container ?? contextMenu.value?.$el ?? null
-}
-
-function dismissIfOutside(event: Event) {
-  if (!isVisible.value) return
-  const overlay = getOverlayEl()
-  if (!overlay) return
-  if (overlay.contains(event.target as Node)) return
-  hide()
-}
-
-useEventListener(window, 'pointerdown', dismissIfOutside, { capture: true })
-useEventListener(window, 'scroll', dismissIfOutside, {
-  capture: true,
-  passive: true
+useDismissableOverlay({
+  isOpen: isVisible,
+  getOverlayEl: () => document.getElementById(contextMenuId),
+  onDismiss: hide,
+  dismissOnScroll: true
 })
 
 const showAddToWorkflow = computed(() => {