fix: manager progress toast and install button UX issues (#10423 )

## Changes - Reset `isRestartCompleted` in `closeToast()` so the "Apply Changes" button appears correctly on subsequent installs instead of skipping to the success message - Add `@click.stop` on `PackInstallButton` to prevent click from bubbling up to card selection, which was unintentionally opening the right info panel ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-10423-fix-manager-progress-toast-and-install-button-UX-issues-32d6d73d365081eba2c6d5b9b35ab26e) by [Unito](https://www.unito.io)
refactor: rebuild SingleSelect and MultiSelect with Reka UI (#9742 )
2026-05-25 23:25:02 +00:00 · 2026-03-23 21:57:16 -07:00 · 2026-03-24 04:39:20 +00:00 · 2026-03-24 12:27:42 +09:00 · 2026-03-23 18:45:40 -07:00
15 changed files with 553 additions and 381 deletions
--- a/browser_tests/tests/templates.spec.ts
+++ b/browser_tests/tests/templates.spec.ts
@@ -206,6 +206,31 @@ test.describe('Templates', { tag: ['@slow', '@workflow'] }, () => {
    await expect(nav).toBeVisible() // Nav should be visible at tablet size
  })

+  test(
+    'select components in filter bar render correctly',
+    { tag: '@screenshot' },
+    async ({ comfyPage }) => {
+      await comfyPage.command.executeCommand('Comfy.BrowseTemplates')
+      await expect(comfyPage.templates.content).toBeVisible()
+
+      // Wait for filter bar select components to render
+      const dialog = comfyPage.page.getByRole('dialog')
+      const sortBySelect = dialog.getByRole('combobox', { name: /Sort/ })
+      await expect(sortBySelect).toBeVisible()
+
+      // Screenshot the filter bar containing MultiSelect and SingleSelect
+      const filterBar = sortBySelect.locator(
+        'xpath=ancestor::div[contains(@class, "justify-between")]'
+      )
+      await expect(filterBar).toHaveScreenshot(
+        'template-filter-bar-select-components.png',
+        {
+          mask: [comfyPage.page.locator('.p-toast')]
+        }
+      )
+    }
+  )
+
  test(
    'template cards descriptions adjust height dynamically',
    { tag: '@screenshot' },
--- a/browser_tests/tests/templates.spec.ts-snapshots/template-filter-bar-select-components-chromium-linux.png
+++ b/browser_tests/tests/templates.spec.ts-snapshots/template-filter-bar-select-components-chromium-linux.png
--- a/browser_tests/tests/vueNodes/interactions/node/move.spec.ts
+++ b/browser_tests/tests/vueNodes/interactions/node/move.spec.ts
@@ -47,6 +47,46 @@ test.describe('Vue Node Moving', () => {
    }
  )

+  test('should not move node when pointer moves less than drag threshold', async ({
+    comfyPage
+  }) => {
+    const headerPos = await getLoadCheckpointHeaderPos(comfyPage)
+
+    // Move only 2px — below the 3px drag threshold in useNodePointerInteractions
+    await comfyPage.page.mouse.move(headerPos.x, headerPos.y)
+    await comfyPage.page.mouse.down()
+    await comfyPage.page.mouse.move(headerPos.x + 2, headerPos.y + 1, {
+      steps: 5
+    })
+    await comfyPage.page.mouse.up()
+    await comfyPage.nextFrame()
+
+    const afterPos = await getLoadCheckpointHeaderPos(comfyPage)
+    expect(afterPos.x).toBeCloseTo(headerPos.x, 0)
+    expect(afterPos.y).toBeCloseTo(headerPos.y, 0)
+
+    // The small movement should have selected the node, not dragged it
+    expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(1)
+  })
+
+  test('should move node when pointer moves beyond drag threshold', async ({
+    comfyPage
+  }) => {
+    const headerPos = await getLoadCheckpointHeaderPos(comfyPage)
+
+    // Move 50px — well beyond the 3px drag threshold
+    await comfyPage.page.mouse.move(headerPos.x, headerPos.y)
+    await comfyPage.page.mouse.down()
+    await comfyPage.page.mouse.move(headerPos.x + 50, headerPos.y + 50, {
+      steps: 20
+    })
+    await comfyPage.page.mouse.up()
+    await comfyPage.nextFrame()
+
+    const afterPos = await getLoadCheckpointHeaderPos(comfyPage)
+    await expectPosChanged(headerPos, afterPos)
+  })
+
  test(
    '@mobile should allow moving nodes by dragging on touch devices',
    { tag: '@screenshot' },
--- a/src/components/input/MultiSelect.test.ts
+++ b/src/components/input/MultiSelect.test.ts
@@ -0,0 +1,60 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import { nextTick } from 'vue'
+import { createI18n } from 'vue-i18n'
+
+import MultiSelect from './MultiSelect.vue'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      g: {
+        multiSelectDropdown: 'Multi-select dropdown',
+        noResultsFound: 'No results found',
+        search: 'Search',
+        clearAll: 'Clear all',
+        itemsSelected: 'Items selected'
+      }
+    }
+  }
+})
+
+describe('MultiSelect', () => {
+  function createWrapper() {
+    return mount(MultiSelect, {
+      attachTo: document.body,
+      global: {
+        plugins: [i18n]
+      },
+      props: {
+        modelValue: [],
+        label: 'Category',
+        options: [
+          { name: 'One', value: 'one' },
+          { name: 'Two', value: 'two' }
+        ]
+      }
+    })
+  }
+
+  it('keeps open-state border styling available while the dropdown is open', async () => {
+    const wrapper = createWrapper()
+
+    const trigger = wrapper.get('button[aria-haspopup="listbox"]')
+
+    expect(trigger.classes()).toContain(
+      'data-[state=open]:border-node-component-border'
+    )
+    expect(trigger.attributes('aria-expanded')).toBe('false')
+
+    await trigger.trigger('click')
+    await nextTick()
+
+    expect(trigger.attributes('aria-expanded')).toBe('true')
+    expect(trigger.attributes('data-state')).toBe('open')
+
+    wrapper.unmount()
+  })
+})
--- a/src/components/input/MultiSelect.vue
+++ b/src/components/input/MultiSelect.vue
@@ -1,207 +1,215 @@
 <template>
-  <!--
-    Note: Unlike SingleSelect, we don't need an explicit options prop because:
-    1. Our value template only shows a static label (not dynamic based on selection)
-    2. We display a count badge instead of actual selected labels
-    3. All PrimeVue props (including options) are passed via v-bind="$attrs"
-    option-label="name" is required because our option template directly accesses option.name
-    max-selected-labels="0" is required to show count badge instead of selected item labels
-  -->
-  <MultiSelect
+  <ComboboxRoot
    v-model="selectedItems"
-    v-bind="{ ...$attrs, options: filteredOptions }"
-    option-label="name"
-    unstyled
-    :max-selected-labels="0"
-    :pt="{
-      root: ({ props }: MultiSelectPassThroughMethodOptions) => ({
-        class: cn(
-          'relative inline-flex cursor-pointer select-none',
-          size === 'md' ? 'h-8' : 'h-10',
-          'rounded-lg bg-secondary-background text-base-foreground',
-          'transition-all duration-200 ease-in-out',
-          'hover:bg-secondary-background-hover',
-          'border-[2.5px] border-solid',
-          selectedCount > 0 ? 'border-base-foreground' : 'border-transparent',
-          'focus-within:border-base-foreground',
-          props.disabled &&
-            'cursor-default opacity-30 hover:bg-secondary-background'
-        )
-      }),
-      labelContainer: {
-        class: cn(
-          'flex flex-1 items-center overflow-hidden py-2 whitespace-nowrap',
-          size === 'md' ? 'pl-3' : 'pl-4'
-        )
-      },
-      label: {
-        class: 'p-0'
-      },
-      dropdown: {
-        class: 'flex shrink-0 cursor-pointer items-center justify-center px-3'
-      },
-      header: () => ({
-        class:
-          showSearchBox || showSelectedCount || showClearButton
-            ? 'block'
-            : 'hidden'
-      }),
-      // Overlay & list visuals unchanged
-      overlay: {
-        class: cn(
-          'mt-2 rounded-lg p-2',
-          'bg-base-background',
-          'text-base-foreground',
-          'border border-solid border-border-default'
-        )
-      },
-      listContainer: () => ({
-        style: { maxHeight: `min(${listMaxHeight}, 50vh)` },
-        class: 'scrollbar-custom'
-      }),
-      list: {
-        class: 'flex flex-col gap-0 p-0 m-0 list-none border-none text-sm'
-      },
-      // Option row hover and focus tone
-      option: ({ context }: MultiSelectPassThroughMethodOptions) => ({
-        class: cn(
-          'flex h-10 cursor-pointer items-center gap-2 rounded-lg px-2',
-          'hover:bg-secondary-background-hover',
-          // Add focus/highlight state for keyboard navigation
-          context?.focused &&
-            'bg-secondary-background-selected hover:bg-secondary-background-selected'
-        )
-      }),
-      // Hide built-in checkboxes entirely via PT (no :deep)
-      pcHeaderCheckbox: {
-        root: { class: 'hidden' },
-        style: { display: 'none' }
-      },
-      pcOptionCheckbox: {
-        root: { class: 'hidden' },
-        style: { display: 'none' }
-      },
-      emptyMessage: {
-        class: 'px-3 pb-4 text-sm text-muted-foreground'
-      }
-    }"
-    :aria-label="label || t('g.multiSelectDropdown')"
-    role="combobox"
-    :aria-expanded="false"
-    aria-haspopup="listbox"
-    :tabindex="0"
+    multiple
+    by="value"
+    :disabled
+    ignore-filter
+    :reset-search-term-on-select="false"
  >
-    <template
-      v-if="showSearchBox || showSelectedCount || showClearButton"
-      #header
-    >
-      <div class="flex flex-col px-2 pt-2 pb-0">
-        <SearchInput
-          v-if="showSearchBox"
-          v-model="searchQuery"
-          :class="showSelectedCount || showClearButton ? 'mb-2' : ''"
-          :placeholder="searchPlaceholder"
-          size="sm"
-        />
-        <div
-          v-if="showSelectedCount || showClearButton"
-          class="mt-2 flex items-center justify-between"
-        >
-          <span
-            v-if="showSelectedCount"
-            class="px-1 text-sm text-base-foreground"
-          >
-            {{
-              selectedCount > 0
-                ? $t('g.itemsSelected', { selectedCount })
-                : $t('g.itemSelected', { selectedCount })
-            }}
-          </span>
-          <Button
-            v-if="showClearButton"
-            variant="textonly"
-            size="md"
-            @click.stop="selectedItems = []"
-          >
-            {{ $t('g.clearAll') }}
-          </Button>
-        </div>
-        <div class="my-4 h-px bg-border-default"></div>
-      </div>
-    </template>
-
-    <!-- Trigger value (keep text scale identical) -->
-    <template #value>
-      <span :class="size === 'md' ? 'text-xs' : 'text-sm'">
-        {{ label }}
-      </span>
-      <span
-        v-if="selectedCount > 0"
-        class="pointer-events-none absolute -top-2 -right-2 z-10 flex size-5 items-center justify-center rounded-full bg-base-foreground text-xs font-semibold text-base-background"
-      >
-        {{ selectedCount }}
-      </span>
-    </template>
-
-    <!-- Chevron size identical to current -->
-    <template #dropdownicon>
-      <i class="icon-[lucide--chevron-down] text-muted-foreground" />
-    </template>
-
-    <!-- Custom option row: square checkbox + label (unchanged layout/colors) -->
-    <template #option="slotProps">
-      <div
-        role="button"
-        class="flex cursor-pointer items-center gap-2"
-        :style="popoverStyle"
+    <ComboboxAnchor as-child>
+      <ComboboxTrigger
+        v-bind="$attrs"
+        :aria-label="label || t('g.multiSelectDropdown')"
+        :class="
+          cn(
+            'relative inline-flex cursor-pointer items-center select-none',
+            size === 'md' ? 'h-8' : 'h-10',
+            'rounded-lg bg-secondary-background text-base-foreground',
+            'transition-all duration-200 ease-in-out',
+            'hover:bg-secondary-background-hover',
+            'border-[2.5px] border-solid border-transparent',
+            selectedCount > 0
+              ? 'border-base-foreground'
+              : 'focus-visible:border-node-component-border data-[state=open]:border-node-component-border',
+            disabled &&
+              'cursor-default opacity-30 hover:bg-secondary-background'
+          )
+        "
      >
        <div
-          class="flex size-4 shrink-0 items-center justify-center rounded-sm p-0.5 transition-all duration-200"
          :class="
-            slotProps.selected
-              ? 'bg-primary-background'
-              : 'bg-secondary-background'
+            cn(
+              'flex flex-1 items-center overflow-hidden py-2 whitespace-nowrap',
+              size === 'md' ? 'pl-3' : 'pl-4'
+            )
          "
        >
-          <i
-            v-if="slotProps.selected"
-            class="text-bold icon-[lucide--check] text-xs text-base-foreground"
-          />
+          <span :class="size === 'md' ? 'text-xs' : 'text-sm'">
+            {{ label }}
+          </span>
+          <span
+            v-if="selectedCount > 0"
+            class="pointer-events-none absolute -top-2 -right-2 z-10 flex size-5 items-center justify-center rounded-full bg-base-foreground text-xs font-semibold text-base-background"
+          >
+            {{ selectedCount }}
+          </span>
        </div>
-        <span>
-          {{ slotProps.option.name }}
-        </span>
-      </div>
-    </template>
-  </MultiSelect>
+        <div
+          class="flex shrink-0 cursor-pointer items-center justify-center px-3"
+        >
+          <i class="icon-[lucide--chevron-down] text-muted-foreground" />
+        </div>
+      </ComboboxTrigger>
+    </ComboboxAnchor>
+
+    <ComboboxPortal>
+      <ComboboxContent
+        position="popper"
+        :side-offset="8"
+        align="start"
+        :style="popoverStyle"
+        :class="
+          cn(
+            'z-3000 overflow-hidden',
+            'rounded-lg p-2',
+            'bg-base-background text-base-foreground',
+            'border border-solid border-border-default',
+            'shadow-md',
+            'data-[state=closed]:animate-out data-[state=open]:animate-in',
+            'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+            'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+            'data-[side=bottom]:slide-in-from-top-2'
+          )
+        "
+        @focus-outside="preventFocusDismiss"
+      >
+        <div
+          v-if="showSearchBox || showSelectedCount || showClearButton"
+          class="flex flex-col px-2 pt-2 pb-0"
+        >
+          <div
+            v-if="showSearchBox"
+            :class="
+              cn(
+                'flex items-center gap-2 rounded-lg border border-solid border-border-default px-3 py-1.5',
+                (showSelectedCount || showClearButton) && 'mb-2'
+              )
+            "
+          >
+            <i
+              class="icon-[lucide--search] shrink-0 text-sm text-muted-foreground"
+            />
+            <ComboboxInput
+              v-model="searchQuery"
+              :placeholder="searchPlaceholder ?? t('g.search')"
+              class="w-full border-none bg-transparent text-sm outline-none"
+            />
+          </div>
+          <div
+            v-if="showSelectedCount || showClearButton"
+            class="mt-2 flex items-center justify-between"
+          >
+            <span
+              v-if="showSelectedCount"
+              class="px-1 text-sm text-base-foreground"
+            >
+              {{ $t('g.itemsSelected', { count: selectedCount }) }}
+            </span>
+            <Button
+              v-if="showClearButton"
+              variant="textonly"
+              size="md"
+              @click.stop="selectedItems = []"
+            >
+              {{ $t('g.clearAll') }}
+            </Button>
+          </div>
+          <div class="my-4 h-px bg-border-default" />
+        </div>
+
+        <ComboboxViewport
+          :class="
+            cn(
+              'flex flex-col gap-0 p-0 text-sm',
+              'scrollbar-custom overflow-y-auto',
+              'min-w-(--reka-combobox-trigger-width)'
+            )
+          "
+          :style="{ maxHeight: `min(${listMaxHeight}, 50vh)` }"
+        >
+          <ComboboxItem
+            v-for="opt in filteredOptions"
+            :key="opt.value"
+            :value="opt"
+            :class="
+              cn(
+                'group flex h-10 shrink-0 cursor-pointer items-center gap-2 rounded-lg px-2 outline-none',
+                'hover:bg-secondary-background-hover',
+                'data-highlighted:bg-secondary-background-selected data-highlighted:hover:bg-secondary-background-selected'
+              )
+            "
+          >
+            <div
+              class="flex size-4 shrink-0 items-center justify-center rounded-sm transition-all duration-200 group-data-[state=checked]:bg-primary-background group-data-[state=unchecked]:bg-secondary-background [&>span]:flex"
+            >
+              <ComboboxItemIndicator>
+                <i
+                  class="icon-[lucide--check] text-xs font-bold text-base-foreground"
+                />
+              </ComboboxItemIndicator>
+            </div>
+            <span>{{ opt.name }}</span>
+          </ComboboxItem>
+          <ComboboxEmpty class="px-3 pb-4 text-sm text-muted-foreground">
+            {{ $t('g.noResultsFound') }}
+          </ComboboxEmpty>
+        </ComboboxViewport>
+      </ComboboxContent>
+    </ComboboxPortal>
+  </ComboboxRoot>
 </template>

 <script setup lang="ts">
 import { useFuse } from '@vueuse/integrations/useFuse'
 import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
-import type { MultiSelectPassThroughMethodOptions } from 'primevue/multiselect'
-import MultiSelect from 'primevue/multiselect'
-import { computed, useAttrs } from 'vue'
+import type { FocusOutsideEvent } from 'reka-ui'
+import {
+  ComboboxAnchor,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxItemIndicator,
+  ComboboxPortal,
+  ComboboxRoot,
+  ComboboxTrigger,
+  ComboboxViewport
+} from 'reka-ui'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'

-import SearchInput from '@/components/ui/search-input/SearchInput.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { usePopoverSizing } from '@/composables/usePopoverSizing'
 import { cn } from '@/utils/tailwindUtil'

 import type { SelectOption } from './types'

-type Option = SelectOption
-
 defineOptions({
  inheritAttrs: false
 })

-interface Props {
+const {
+  label,
+  options = [],
+  size = 'lg',
+  disabled = false,
+  showSearchBox = false,
+  showSelectedCount = false,
+  showClearButton = false,
+  searchPlaceholder,
+  listMaxHeight = '28rem',
+  popoverMinWidth,
+  popoverMaxWidth
+} = defineProps<{
  /** Input label shown on the trigger button */
  label?: string
+  /** Available options */
+  options?: SelectOption[]
  /** Trigger size: 'lg' (40px, Interface) or 'md' (32px, Node) */
  size?: 'lg' | 'md'
+  /** Disable the select */
+  disabled?: boolean
  /** Show search box in the panel header */
  showSearchBox?: boolean
  /** Show selected count text in the panel header */
@@ -216,22 +224,9 @@ interface Props {
  popoverMinWidth?: string
  /** Maximum width of the popover (default: auto) */
  popoverMaxWidth?: string
-  // Note: options prop is intentionally omitted.
-  // It's passed via $attrs to maximize PrimeVue API compatibility
-}
-const {
-  label,
-  size = 'lg',
-  showSearchBox = false,
-  showSelectedCount = false,
-  showClearButton = false,
-  searchPlaceholder = 'Search...',
-  listMaxHeight = '28rem',
-  popoverMinWidth,
-  popoverMaxWidth
-} = defineProps<Props>()
+}>()

-const selectedItems = defineModel<Option[]>({
+const selectedItems = defineModel<SelectOption[]>({
  required: true
 })
 const searchQuery = defineModel<string>('searchQuery', { default: '' })
@@ -239,15 +234,16 @@ const searchQuery = defineModel<string>('searchQuery', { default: '' })
 const { t } = useI18n()
 const selectedCount = computed(() => selectedItems.value.length)

+function preventFocusDismiss(event: FocusOutsideEvent) {
+  event.preventDefault()
+}
+
 const popoverStyle = usePopoverSizing({
  minWidth: popoverMinWidth,
  maxWidth: popoverMaxWidth
 })
-const attrs = useAttrs()
-const originalOptions = computed(() => (attrs.options as Option[]) || [])

-// Use VueUse's useFuse for better reactivity and performance
-const fuseOptions: UseFuseOptions<Option> = {
+const fuseOptions: UseFuseOptions<SelectOption> = {
  fuseOptions: {
    keys: ['name', 'value'],
    threshold: 0.3,
@@ -256,23 +252,20 @@ const fuseOptions: UseFuseOptions<Option> = {
  matchAllWhenSearchEmpty: true
 }

-const { results } = useFuse(searchQuery, originalOptions, fuseOptions)
+const { results } = useFuse(searchQuery, () => options, fuseOptions)

-// Filter options based on search, but always include selected items
 const filteredOptions = computed(() => {
  if (!searchQuery.value || searchQuery.value.trim() === '') {
-    return originalOptions.value
+    return options
  }

-  // results.value already contains the search results from useFuse
  const searchResults = results.value.map(
-    (result: { item: Option }) => result.item
+    (result: { item: SelectOption }) => result.item
  )

-  // Include selected items that aren't in search results
  const selectedButNotInResults = selectedItems.value.filter(
    (item) =>
-      !searchResults.some((result: Option) => result.value === item.value)
+      !searchResults.some((result: SelectOption) => result.value === item.value)
  )

  return [...selectedButNotInResults, ...searchResults]
--- a/src/components/input/SingleSelect.vue
+++ b/src/components/input/SingleSelect.vue
@@ -1,21 +1,12 @@
 <template>
-  <!--
-    Note: We explicitly pass options here (not just via $attrs) because:
-    1. Our custom value template needs options to look up labels from values
-    2. PrimeVue's value slot only provides 'value' and 'placeholder', not the selected item's label
-    3. We need to maintain the icon slot functionality in the value template
-    option-label="name" is required because our option template directly accesses option.name
-  -->
-  <Select
-    v-model="selectedItem"
-    v-bind="$attrs"
-    :options="options"
-    option-label="name"
-    option-value="value"
-    unstyled
-    :pt="{
-      root: ({ props }: SelectPassThroughMethodOptions<SelectOption>) => ({
-        class: cn(
+  <SelectRoot v-model="selectedItem" :disabled>
+    <SelectTrigger
+      v-bind="$attrs"
+      :aria-label="label || t('g.singleSelectDropdown')"
+      :aria-busy="loading || undefined"
+      :aria-invalid="invalid || undefined"
+      :class="
+        cn(
          'relative inline-flex cursor-pointer items-center select-none',
          size === 'md' ? 'h-8' : 'h-10',
          'rounded-lg',
@@ -23,121 +14,107 @@
          'transition-all duration-200 ease-in-out',
          'hover:bg-secondary-background-hover',
          'border-[2.5px] border-solid',
-          invalid
-            ? 'border-destructive-background'
-            : 'border-transparent focus-within:border-node-component-border',
-          props.disabled &&
-            'cursor-default opacity-30 hover:bg-secondary-background'
+          invalid ? 'border-destructive-background' : 'border-transparent',
+          'focus:border-node-component-border focus:outline-none',
+          'disabled:cursor-default disabled:opacity-30 disabled:hover:bg-secondary-background'
        )
-      }),
-      label: {
-        class: cn(
-          'flex flex-1 items-center py-2 whitespace-nowrap outline-hidden',
-          size === 'md' ? 'pl-3' : 'pl-4'
-        )
-      },
-      dropdown: {
-        class:
-          // Right chevron touch area
-          'flex shrink-0 items-center justify-center px-3 py-2'
-      },
-      overlay: {
-        class: cn(
-          'mt-2 rounded-lg p-2',
-          'bg-base-background text-base-foreground',
-          'border border-solid border-border-default'
-        )
-      },
-      listContainer: () => ({
-        style: `max-height: min(${listMaxHeight}, 50vh)`,
-        class: 'scrollbar-custom'
-      }),
-      list: {
-        class:
-          // Same list tone/size as MultiSelect
-          'flex flex-col gap-0 p-0 m-0 list-none border-none text-sm'
-      },
-      option: ({ context }: SelectPassThroughMethodOptions<SelectOption>) => ({
-        class: cn(
-          // Row layout
-          'flex items-center justify-between gap-3 rounded-sm px-2 py-3',
-          'hover:bg-secondary-background-hover',
-          // Add focus state for keyboard navigation
-          context.focused && 'bg-secondary-background-hover',
-          // Selected state + check icon
-          context.selected &&
-            'bg-secondary-background-selected hover:bg-secondary-background-selected'
-        )
-      }),
-      optionLabel: {
-        class: 'truncate'
-      },
-      optionGroupLabel: {
-        class: 'px-3 py-2 text-xs uppercase tracking-wide text-muted-foreground'
-      },
-      emptyMessage: {
-        class: 'px-3 py-2 text-sm text-muted-foreground'
-      }
-    }"
-    :aria-label="label || t('g.singleSelectDropdown')"
-    :aria-busy="loading || undefined"
-    :aria-invalid="invalid || undefined"
-    role="combobox"
-    :aria-expanded="false"
-    aria-haspopup="listbox"
-    :tabindex="0"
-  >
-    <!-- Trigger value -->
-    <template #value="slotProps">
+      "
+    >
      <div
        :class="
-          cn('flex items-center gap-2', size === 'md' ? 'text-xs' : 'text-sm')
+          cn(
+            'flex flex-1 items-center gap-2 overflow-hidden py-2',
+            size === 'md' ? 'pl-3 text-xs' : 'pl-4 text-sm'
+          )
        "
      >
        <i
          v-if="loading"
-          class="icon-[lucide--loader-circle] animate-spin text-muted-foreground"
+          class="icon-[lucide--loader-circle] shrink-0 animate-spin text-muted-foreground"
        />
        <slot v-else name="icon" />
-        <span
-          v-if="slotProps.value !== null && slotProps.value !== undefined"
-          class="text-base-foreground"
-        >
-          {{ getLabel(slotProps.value) }}
-        </span>
-        <span v-else class="text-base-foreground">
-          {{ label }}
-        </span>
+        <SelectValue :placeholder="label" class="truncate" />
      </div>
-    </template>
-
-    <!-- Trigger caret (hidden when loading) -->
-    <template #dropdownicon>
-      <i
-        v-if="!loading"
-        class="icon-[lucide--chevron-down] text-muted-foreground"
-      />
-    </template>
-
-    <!-- Option row -->
-    <template #option="{ option, selected }">
      <div
-        class="flex w-full items-center justify-between gap-3"
-        :style="optionStyle"
+        class="flex shrink-0 cursor-pointer items-center justify-center px-3"
      >
-        <span class="truncate">{{ option.name }}</span>
-        <i v-if="selected" class="icon-[lucide--check] text-base-foreground" />
+        <i class="icon-[lucide--chevron-down] text-muted-foreground" />
      </div>
-    </template>
-  </Select>
+    </SelectTrigger>
+
+    <SelectPortal>
+      <SelectContent
+        position="popper"
+        :side-offset="8"
+        align="start"
+        :style="optionStyle"
+        :class="
+          cn(
+            'z-3000 overflow-hidden',
+            'rounded-lg p-2',
+            'bg-base-background text-base-foreground',
+            'border border-solid border-border-default',
+            'shadow-md',
+            'min-w-(--reka-select-trigger-width)',
+            'data-[state=closed]:animate-out data-[state=open]:animate-in',
+            'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+            'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+            'data-[side=bottom]:slide-in-from-top-2'
+          )
+        "
+      >
+        <SelectViewport
+          :style="{ maxHeight: `min(${listMaxHeight}, 50vh)` }"
+          class="scrollbar-custom w-full"
+        >
+          <SelectItem
+            v-for="opt in options"
+            :key="opt.value"
+            :value="opt.value"
+            :class="
+              cn(
+                'relative flex w-full cursor-pointer items-center justify-between select-none',
+                'gap-3 rounded-sm px-2 py-3 text-sm outline-none',
+                'hover:bg-secondary-background-hover',
+                'focus:bg-secondary-background-hover',
+                'data-[state=checked]:bg-secondary-background-selected',
+                'data-[state=checked]:hover:bg-secondary-background-selected'
+              )
+            "
+          >
+            <SelectItemText class="truncate">
+              {{ opt.name }}
+            </SelectItemText>
+            <SelectItemIndicator
+              class="flex shrink-0 items-center justify-center"
+            >
+              <i
+                class="icon-[lucide--check] text-base-foreground"
+                aria-hidden="true"
+              />
+            </SelectItemIndicator>
+          </SelectItem>
+        </SelectViewport>
+      </SelectContent>
+    </SelectPortal>
+  </SelectRoot>
 </template>

 <script setup lang="ts">
-import type { SelectPassThroughMethodOptions } from 'primevue/select'
-import Select from 'primevue/select'
-import { computed } from 'vue'
+import {
+  SelectContent,
+  SelectItem,
+  SelectItemIndicator,
+  SelectItemText,
+  SelectPortal,
+  SelectRoot,
+  SelectTrigger,
+  SelectValue,
+  SelectViewport
+} from 'reka-ui'
 import { useI18n } from 'vue-i18n'

+import { usePopoverSizing } from '@/composables/usePopoverSizing'
 import { cn } from '@/utils/tailwindUtil'

 import type { SelectOption } from './types'
@@ -152,16 +129,12 @@ const {
  size = 'lg',
  invalid = false,
  loading = false,
+  disabled = false,
  listMaxHeight = '28rem',
  popoverMinWidth,
  popoverMaxWidth
 } = defineProps<{
  label?: string
-  /**
-   * Required for displaying the selected item's label.
-   * Cannot rely on $attrs alone because we need to access options
-   * in getLabel() to map values to their display names.
-   */
  options?: SelectOption[]
  /** Trigger size: 'lg' (40px, Interface) or 'md' (32px, Node) */
  size?: 'lg' | 'md'
@@ -169,6 +142,8 @@ const {
  invalid?: boolean
  /** Show loading spinner instead of chevron */
  loading?: boolean
+  /** Disable the select */
+  disabled?: boolean
  /** Maximum height of the dropdown panel (default: 28rem) */
  listMaxHeight?: string
  /** Minimum width of the popover (default: auto) */
@@ -181,26 +156,8 @@ const selectedItem = defineModel<string | undefined>({ required: true })

 const { t } = useI18n()

-/**
- * Maps a value to its display label.
- * Necessary because PrimeVue's value slot doesn't provide the selected item's label,
- * only the raw value. We need this to show the correct text when an item is selected.
- */
-const getLabel = (val: string | null | undefined) => {
-  if (val == null) return label ?? ''
-  if (!options) return label ?? ''
-  const found = options.find((o) => o.value === val)
-  return found ? found.name : (label ?? '')
-}
-
-// Extract complex style logic from template
-const optionStyle = computed(() => {
-  if (!popoverMinWidth && !popoverMaxWidth) return undefined
-
-  const styles: string[] = []
-  if (popoverMinWidth) styles.push(`min-width: ${popoverMinWidth}`)
-  if (popoverMaxWidth) styles.push(`max-width: ${popoverMaxWidth}`)
-
-  return styles.join('; ')
+const optionStyle = usePopoverSizing({
+  minWidth: popoverMinWidth,
+  maxWidth: popoverMaxWidth
 })
 </script>
--- a/src/composables/useClickDragGuard.test.ts
+++ b/src/composables/useClickDragGuard.test.ts
@@ -0,0 +1,65 @@
+import { describe, expect, it } from 'vitest'
+
+import {
+  exceedsClickThreshold,
+  useClickDragGuard
+} from '@/composables/useClickDragGuard'
+
+describe('exceedsClickThreshold', () => {
+  it('returns false when distance is within threshold', () => {
+    expect(exceedsClickThreshold({ x: 0, y: 0 }, { x: 2, y: 2 }, 5)).toBe(false)
+  })
+
+  it('returns true when distance exceeds threshold', () => {
+    expect(exceedsClickThreshold({ x: 0, y: 0 }, { x: 3, y: 5 }, 5)).toBe(true)
+  })
+
+  it('returns false when distance exactly equals threshold', () => {
+    expect(exceedsClickThreshold({ x: 0, y: 0 }, { x: 3, y: 4 }, 5)).toBe(false)
+  })
+
+  it('handles negative deltas', () => {
+    expect(exceedsClickThreshold({ x: 10, y: 10 }, { x: 4, y: 2 }, 5)).toBe(
+      true
+    )
+  })
+})
+
+describe('useClickDragGuard', () => {
+  it('reports no drag when pointer has not moved', () => {
+    const guard = useClickDragGuard(5)
+    guard.recordStart({ clientX: 100, clientY: 200 })
+    expect(guard.wasDragged({ clientX: 100, clientY: 200 })).toBe(false)
+  })
+
+  it('reports no drag when movement is within threshold', () => {
+    const guard = useClickDragGuard(5)
+    guard.recordStart({ clientX: 100, clientY: 200 })
+    expect(guard.wasDragged({ clientX: 103, clientY: 204 })).toBe(false)
+  })
+
+  it('reports drag when movement exceeds threshold', () => {
+    const guard = useClickDragGuard(5)
+    guard.recordStart({ clientX: 100, clientY: 200 })
+    expect(guard.wasDragged({ clientX: 106, clientY: 200 })).toBe(true)
+  })
+
+  it('returns false when no start has been recorded', () => {
+    const guard = useClickDragGuard(5)
+    expect(guard.wasDragged({ clientX: 100, clientY: 200 })).toBe(false)
+  })
+
+  it('returns false after reset', () => {
+    const guard = useClickDragGuard(5)
+    guard.recordStart({ clientX: 100, clientY: 200 })
+    guard.reset()
+    expect(guard.wasDragged({ clientX: 200, clientY: 300 })).toBe(false)
+  })
+
+  it('respects custom threshold', () => {
+    const guard = useClickDragGuard(3)
+    guard.recordStart({ clientX: 0, clientY: 0 })
+    expect(guard.wasDragged({ clientX: 3, clientY: 0 })).toBe(false)
+    expect(guard.wasDragged({ clientX: 4, clientY: 0 })).toBe(true)
+  })
+})
--- a/src/composables/useClickDragGuard.ts
+++ b/src/composables/useClickDragGuard.ts
@@ -0,0 +1,41 @@
+interface PointerPosition {
+  readonly x: number
+  readonly y: number
+}
+
+function squaredDistance(a: PointerPosition, b: PointerPosition): number {
+  const dx = a.x - b.x
+  const dy = a.y - b.y
+  return dx * dx + dy * dy
+}
+
+export function exceedsClickThreshold(
+  start: PointerPosition,
+  end: PointerPosition,
+  threshold: number
+): boolean {
+  return squaredDistance(start, end) > threshold * threshold
+}
+
+export function useClickDragGuard(threshold: number = 5) {
+  let start: PointerPosition | null = null
+
+  function recordStart(e: { clientX: number; clientY: number }) {
+    start = { x: e.clientX, y: e.clientY }
+  }
+
+  function wasDragged(e: { clientX: number; clientY: number }): boolean {
+    if (!start) return false
+    return exceedsClickThreshold(
+      start,
+      { x: e.clientX, y: e.clientY },
+      threshold
+    )
+  }
+
+  function reset() {
+    start = null
+  }
+
+  return { recordStart, wasDragged, reset }
+}
--- a/src/extensions/core/load3d/Load3d.ts
+++ b/src/extensions/core/load3d/Load3d.ts
@@ -1,5 +1,7 @@
 import * as THREE from 'three'

+import { exceedsClickThreshold } from '@/composables/useClickDragGuard'
+
 import { AnimationManager } from './AnimationManager'
 import { CameraManager } from './CameraManager'
 import { ControlsManager } from './ControlsManager'
@@ -68,9 +70,7 @@ class Load3d {
  targetAspectRatio: number = 1
  isViewerMode: boolean = false

-  // Context menu tracking
-  private rightMouseDownX: number = 0
-  private rightMouseDownY: number = 0
+  private rightMouseStart: { x: number; y: number } = { x: 0, y: 0 }
  private rightMouseMoved: boolean = false
  private readonly dragThreshold: number = 5
  private contextMenuAbortController: AbortController | null = null
@@ -197,18 +197,20 @@ class Load3d {

    const mousedownHandler = (e: MouseEvent) => {
      if (e.button === 2) {
-        this.rightMouseDownX = e.clientX
-        this.rightMouseDownY = e.clientY
+        this.rightMouseStart = { x: e.clientX, y: e.clientY }
        this.rightMouseMoved = false
      }
    }

    const mousemoveHandler = (e: MouseEvent) => {
      if (e.buttons === 2) {
-        const dx = Math.abs(e.clientX - this.rightMouseDownX)
-        const dy = Math.abs(e.clientY - this.rightMouseDownY)
-
-        if (dx > this.dragThreshold || dy > this.dragThreshold) {
+        if (
+          exceedsClickThreshold(
+            this.rightMouseStart,
+            { x: e.clientX, y: e.clientY },
+            this.dragThreshold
+          )
+        ) {
          this.rightMouseMoved = true
        }
      }
@@ -217,12 +219,13 @@ class Load3d {
    const contextmenuHandler = (e: MouseEvent) => {
      if (this.isViewerMode) return

-      const dx = Math.abs(e.clientX - this.rightMouseDownX)
-      const dy = Math.abs(e.clientY - this.rightMouseDownY)
      const wasDragging =
        this.rightMouseMoved ||
-        dx > this.dragThreshold ||
-        dy > this.dragThreshold
+        exceedsClickThreshold(
+          this.rightMouseStart,
+          { x: e.clientX, y: e.clientY },
+          this.dragThreshold
+        )

      this.rightMouseMoved = false

--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -278,8 +278,7 @@
    "clearAll": "Clear all",
    "copyURL": "Copy URL",
    "releaseTitle": "{package} {version} Release",
-    "itemSelected": "{selectedCount} item selected",
-    "itemsSelected": "{selectedCount} items selected",
+    "itemsSelected": "No items selected | {count} item selected | {count} items selected",
    "multiSelectDropdown": "Multi-select dropdown",
    "singleSelectDropdown": "Single-select dropdown",
    "progressCountOf": "of",
--- a/src/platform/settings/components/SettingDialog.vue
+++ b/src/platform/settings/components/SettingDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <BaseModalLayout content-title="" data-testid="settings-dialog" size="md">
+  <BaseModalLayout content-title="" data-testid="settings-dialog" size="sm">
    <template #leftPanelHeaderTitle>
      <i class="icon-[lucide--settings]" />
      <h2 class="text-neutral text-base">{{ $t('g.settings') }}</h2>
@@ -12,6 +12,7 @@
          size="md"
          :placeholder="$t('g.searchSettings') + '...'"
          :debounce-time="128"
+          autofocus
          @search="handleSearch"
        />
      </div>
--- a/src/renderer/extensions/linearMode/DropZone.vue
+++ b/src/renderer/extensions/linearMode/DropZone.vue
@@ -4,6 +4,7 @@ import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'

 import ImageLightbox from '@/components/common/ImageLightbox.vue'
+import { useClickDragGuard } from '@/composables/useClickDragGuard'
 import { cn } from '@/utils/tailwindUtil'

 defineOptions({ inheritAttrs: false })
@@ -30,26 +31,17 @@ const {

 const dropZoneRef = ref<HTMLElement | null>(null)
 const canAcceptDrop = ref(false)
-const pointerStart = ref<{ x: number; y: number } | null>(null)
+const clickGuard = useClickDragGuard(5)
 const lightboxOpen = ref(false)

 function onPointerDown(e: PointerEvent) {
-  pointerStart.value = { x: e.clientX, y: e.clientY }
+  clickGuard.recordStart(e)
 }

 function onIndicatorClick(e: MouseEvent) {
-  if (e.detail !== 0) {
-    const start = pointerStart.value
-    if (start) {
-      const dx = e.clientX - start.x
-      const dy = e.clientY - start.y
-      if (dx * dx + dy * dy > 25) {
-        pointerStart.value = null
-        return
-      }
-    }
-  }
-  pointerStart.value = null
+  const dragged = e.detail !== 0 && clickGuard.wasDragged(e)
+  clickGuard.reset()
+  if (dragged) return
  dropIndicator?.onClick?.(e)
 }

--- a/src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.ts
+++ b/src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.ts
@@ -1,7 +1,8 @@
-import { onScopeDispose, ref, toValue } from 'vue'
+import { onScopeDispose, toValue } from 'vue'
 import type { MaybeRefOrGetter } from 'vue'

 import { isMiddlePointerInput } from '@/base/pointerUtils'
+import { useClickDragGuard } from '@/composables/useClickDragGuard'
 import { useVueNodeLifecycle } from '@/composables/graph/useVueNodeLifecycle'
 import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
@@ -28,9 +29,7 @@ export function useNodePointerInteractions(

  let hasDraggingStarted = false

-  const startPosition = ref({ x: 0, y: 0 })
-
-  const DRAG_THRESHOLD = 3 // pixels
+  const dragGuard = useClickDragGuard(3)

  function onPointerdown(event: PointerEvent) {
    if (forwardMiddlePointerIfNeeded(event)) return
@@ -57,7 +56,7 @@ export function useNodePointerInteractions(
      return
    }

-    startPosition.value = { x: event.clientX, y: event.clientY }
+    dragGuard.recordStart(event)

    safeDragStart(event, nodeId)
  }
@@ -85,11 +84,7 @@ export function useNodePointerInteractions(
    }
    // Check if we should start dragging (pointer moved beyond threshold)
    if (lmbDown && !layoutStore.isDraggingVueNodes.value) {
-      const dx = event.clientX - startPosition.value.x
-      const dy = event.clientY - startPosition.value.y
-      const distance = Math.sqrt(dx * dx + dy * dy)
-
-      if (distance > DRAG_THRESHOLD) {
+      if (dragGuard.wasDragged(event)) {
        layoutStore.isDraggingVueNodes.value = true
        handleNodeSelect(event, nodeId)
      }
--- a/src/workbench/extensions/manager/components/ManagerProgressToast.vue
+++ b/src/workbench/extensions/manager/components/ManagerProgressToast.vue
@@ -135,6 +135,7 @@ whenever(() => !isExpanded.value, resetUserScrolling)

 function closeToast() {
  comfyManagerStore.resetTaskState()
+  isRestartCompleted.value = false
  isExpanded.value = false
 }

--- a/src/workbench/extensions/manager/components/manager/button/PackInstallButton.vue
+++ b/src/workbench/extensions/manager/components/manager/button/PackInstallButton.vue
@@ -3,7 +3,7 @@
    variant="primary"
    :size
    :disabled="isLoading || isInstalling"
-    @click="installAllPacks"
+    @click.stop="installAllPacks"
  >
    <i
      v-if="hasConflict && !isInstalling && !isLoading"
Author	SHA1	Message	Date
Jin Yi	7c6ab19484	fix: manager progress toast and install button UX issues (#10423 ) ## Changes - Reset `isRestartCompleted` in `closeToast()` so the "Apply Changes" button appears correctly on subsequent installs instead of skipping to the success message - Add `@click.stop` on `PackInstallButton` to prevent click from bubbling up to card selection, which was unintentionally opening the right info panel ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-10423-fix-manager-progress-toast-and-install-button-UX-issues-32d6d73d365081eba2c6d5b9b35ab26e) by [Unito](https://www.unito.io)	2026-03-23 21:57:16 -07:00
Dante	8f9fe3b21e	refactor: rebuild SingleSelect and MultiSelect with Reka UI (#9742 ) ## Summary - Rebuild `SingleSelect` with Reka UI Select primitives (SelectRoot, SelectTrigger, SelectContent, SelectItem) - Rebuild `MultiSelect` with Reka UI Popover + Listbox (PopoverRoot, ListboxRoot with `multiple`) - Remove PrimeVue dependency from both components - Preserve existing API contract for all consumers ## TODO - [x] Re-evaluate MultiSelect implementation (ComboboxRoot with `multiple` may be cleaner than Popover+Listbox) - [x] E2E verification in actual app (AssetFilterBar, WorkflowTemplateSelectorDialog, etc.) ## Test plan - [x] Storybook visual verification for all SingleSelect/MultiSelect stories - [x] Keyboard navigation (arrow keys, Enter, Escape, typeahead) - [x] Multi-selection with badge count - [x] Search filtering in MultiSelect - [x] Clear all functionality - [x] Disabled state - [x] Invalid state (SingleSelect) - [x] Loading state (SingleSelect) ## screenshot <img width="519" height="475" alt="스크린샷 2026-03-20 오전 12 12 37" src="https://github.com/user-attachments/assets/ffc7f0b0-c88c-486b-a253-73a4da73c1de" /> <img width="842" height="554" alt="스크린샷 2026-03-20 오전 12 23 51" src="https://github.com/user-attachments/assets/410551d4-c843-4898-b305-13a6ad6978ca" /> ## video https://github.com/user-attachments/assets/2fc3a9b9-2671-4c2c-9f54-4f83598afb53 Fixes #9700 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9742-refactor-rebuild-SingleSelect-and-MultiSelect-with-Reka-UI-3206d73d36508113bee2cf160c8f2d50) by [Unito](https://www.unito.io) --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com> Co-authored-by: Alexander Brown <drjkl@comfy.org>	2026-03-24 04:39:20 +00:00
Dante	4411d9a417	refactor: extract shared click-vs-drag guard utility (#10357 ) ## Summary Extract duplicated click-vs-drag detection logic into a shared `useClickDragGuard` composable and `exceedsClickThreshold` pure utility function. ## Changes - What: New `useClickDragGuard(threshold)` composable in `src/composables/useClickDragGuard.ts` that stores pointer start position and checks squared distance against a threshold. Also exports `exceedsClickThreshold` for non-Vue contexts. - Migrated `DropZone.vue`, `useNodePointerInteractions.ts`, and `Load3d.ts` to use the shared utility - `CanvasPointer.ts` left as-is (LiteGraph internal) - All consumers now use squared-distance comparison (no `Math.sqrt` or per-axis `Math.abs`) ## Review Focus - The composable uses plain `let` state instead of `ref` since reactivity is not needed for the start position - `Load3d.ts` uses the pure `exceedsClickThreshold` function directly since it is a class, not a Vue component - Threshold values preserved per-consumer: DropZone=5, useNodePointerInteractions=3, Load3d=5 Fixes #10356 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-10357-refactor-extract-shared-click-vs-drag-guard-utility-32a6d73d3650816e83f5cb89872fb184) by [Unito](https://www.unito.io) --------- Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com> Co-authored-by: Alexander Brown <drjkl@comfy.org>	2026-03-24 12:27:42 +09:00
Jin Yi	98d56bdada	fix: improve settings dialog UX (#10396 ) ## Summary Reduce settings dialog size and autofocus search input for better usability. ## Changes - What: Reduce dialog size from `md` to `sm` (max-width 1400px → 960px); autofocus search input on open ## Review Focus User feedback indicated the settings dialog was too wide and search required an extra click to focus. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-10396-fix-improve-settings-dialog-UX-32c6d73d365081e29eceed55afde1967) by [Unito](https://www.unito.io) Co-authored-by: Amp <amp@ampcode.com>	2026-03-23 18:45:40 -07:00