[backport core/1.33] Fix job details popover sticking after cancel/delete (#7256)

Backport of #6930 to `core/1.33`

Automatically created by backport workflow.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7256-backport-core-1-33-Fix-job-details-popover-sticking-after-cancel-delete-2c46d73d3650819ba0ffccb9e41e8783)
by [Unito](https://www.unito.io)

Co-authored-by: Benjamin Lu <benjaminlu1107@gmail.com>

Author: comfy-pr-bot

src/components/queue/job/JobGroupsList.vue

@@ -36,12 +36,12 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { onBeforeUnmount, ref, watch } from 'vue'
 
 import QueueJobItem from '@/components/queue/job/QueueJobItem.vue'
 import type { JobGroup, JobListItem } from '@/composables/queue/useJobList'
 
-defineProps<{ displayedJobGroups: JobGroup[] }>()
+const props = defineProps<{ displayedJobGroups: JobGroup[] }>()
 
 const emit = defineEmits<{
   (e: 'cancelItem', item: JobListItem): void
@@ -89,4 +89,26 @@ const onDetailsLeave = (jobId: string) => {
     hideTimer.value = null
   }, 150)
 }
+
+const resetActiveDetails = () => {
+  clearHideTimer()
+  clearShowTimer()
+  activeDetailsId.value = null
+}
+
+watch(
+  () => props.displayedJobGroups,
+  (groups) => {
+    const activeId = activeDetailsId.value
+    if (!activeId) return
+
+    const hasActiveJob = groups.some((group) =>
+      group.items.some((item) => item.id === activeId)
+    )
+
+    if (!hasActiveJob) resetActiveDetails()
+  }
+)
+
+onBeforeUnmount(resetActiveDetails)
 </script>

src/components/queue/job/QueueJobItem.vue

@@ -135,7 +135,7 @@
               size="sm"
               class="size-6 transform gap-1 rounded bg-destructive-background text-text-primary transition duration-150 ease-in-out hover:-translate-y-px hover:bg-destructive-background-hover hover:opacity-95"
               :aria-label="t('g.delete')"
-              @click.stop="emit('delete')"
+              @click.stop="onDeleteClick"
             >
               <i class="icon-[lucide--trash-2] size-4" />
             </IconButton>
@@ -150,7 +150,7 @@
               size="sm"
               class="size-6 transform gap-1 rounded bg-destructive-background text-text-primary transition duration-150 ease-in-out hover:-translate-y-px hover:bg-destructive-background-hover hover:opacity-95"
               :aria-label="t('g.cancel')"
-              @click.stop="emit('cancel')"
+              @click.stop="onCancelClick"
             >
               <i class="icon-[lucide--x] size-4" />
             </IconButton>
@@ -190,7 +190,7 @@
           size="sm"
           class="size-6 transform gap-1 rounded bg-destructive-background text-text-primary transition duration-150 ease-in-out hover:-translate-y-px hover:bg-destructive-background-hover hover:opacity-95"
           :aria-label="t('g.cancel')"
-          @click.stop="emit('cancel')"
+          @click.stop="onCancelClick"
         >
           <i class="icon-[lucide--x] size-4" />
         </IconButton>
@@ -355,6 +355,18 @@ const computedShowClear = computed(() => {
   return props.state !== 'completed'
 })
 
+const emitDetailsLeave = () => emit('details-leave', props.jobId)
+
+const onCancelClick = () => {
+  emitDetailsLeave()
+  emit('cancel')
+}
+
+const onDeleteClick = () => {
+  emitDetailsLeave()
+  emit('delete')
+}
+
 const onContextMenu = (event: MouseEvent) => {
   const shouldShowMenu = props.showMenu !== undefined ? props.showMenu : true
   if (shouldShowMenu) emit('menu', event)