Skip to content

Fix error on close of combo dropdown #7804

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
AustinMroz wants to merge 2 commits into
base: main
Choose a base branch
from
+30 −13
Open

Fix error on close of combo dropdown #7804

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a5ff045
Fix error on close of combo dropdown
AustinMroz Dec 30, 2025
907b3d7
Fix tests
AustinMroz Dec 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions src/components/primevueOverride/SelectPlus.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<script>
import Select from 'primevue/select'

export default {
name: 'SelectPlus',
Copy link
Collaborator

@Myestery Myestery Dec 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
name: 'SelectPlus',
name: 'SelectPlus',
emits: ['hide'],

extends: Select,
methods: {
onOverlayLeave() {
this.unbindOutsideClickListener()
this.unbindScrollListener()
this.unbindResizeListener()

this.$emit('hide')

Check warning on line 13 in src/components/primevueOverride/SelectPlus.vue

View workflow job for this annotation

GitHub Actions / lint-and-format 

The "hide" event has been triggered but not declared on `emits` option

Check warning on line 13 in src/components/primevueOverride/SelectPlus.vue

View workflow job for this annotation

GitHub Actions / lint-and-format 

The "hide" event has been triggered but not declared on `emits` option
this.overlay = null
}
}
}
</script>
Comment on lines +1 to +18
Copy link
Contributor

@coderabbitai coderabbitai bot Dec 30, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick | 🔵 Trivial

Consider long-term migration away from PrimeVue components.

While this override appropriately uses the Options API for PrimeVue compatibility, note that the codebase is moving toward VueUse, shadcn/vue, or Reka UI instead of PrimeVue components. This is acceptable as a short-term fix for existing usage, but consider planning a migration path.

Based on learnings, the repository is transitioning away from PrimeVue components.

Copy link
Contributor

@DrJKL DrJKL Dec 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@coderabbitai Where else in the codebase do we use the Options API for Vue components?

Copy link
Contributor

@coderabbitai coderabbitai bot Dec 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Find all .vue files and check for Options API usage
# Options API typically has "export default {" followed by options like methods, data, computed, etc.

echo "=== Vue files using Options API (excluding <script setup>) ==="
echo ""

# Find all .vue files
fd -e vue -x sh -c '
  file="$1"
  # Check if file does NOT have <script setup> (which indicates Composition API)
  if ! grep -q "<script setup" "$file"; then
    # Check if it has export default with Options API patterns
    if grep -q "export default" "$file"; then
      # Check for common Options API properties
      if grep -E "(methods:|data\(|computed:|watch:|extends:|mixins:)" "$file" > /dev/null; then
        echo "$file"
        # Show a snippet of the export default section
        grep -A 5 "export default" "$file" | head -10
        echo "---"
      fi
    fi
  fi
' _ {}

Length of output: 440

@DrJKL The Options API is used in only 2 places in the codebase, both in the src/components/primevueOverride/ directory:

  1. src/components/primevueOverride/AutoCompletePlus.vue - extends PrimeVue's AutoComplete component
  2. src/components/primevueOverride/SelectPlus.vue - extends PrimeVue's Select component (the current file)

Both files use the Options API specifically because they extend PrimeVue components, which is consistent with the repository's guideline that states: "Use the Vue 3 Composition API instead of the Options API when writing Vue components (exception: when overriding or extending PrimeVue components for compatibility)."

The rest of the codebase uses the Composition API (typically <script setup>), so this is a very limited and intentional use of the Options API for PrimeVue compatibility purposes only.

🧠 Learnings used 
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue Dropdown component with Select

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue OverlayPanel component with Popover

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue InputSwitch component with ToggleSwitch

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue Sidebar component with Drawer

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue Chips component with AutoComplete with multiple enabled

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-21T06:04:12.562Z
Learning: Applies to **/*.vue : Avoid new usage of PrimeVue components; use VueUse, shadcn/vue, or Reka UI instead

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue Calendar component with DatePicker

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue Steps component with Stepper without panels

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue InlineMessage component with Message

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue TabMenu component with Tabs without panels

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Use the Vue 3 Composition API instead of the Options API when writing Vue components (exception: when overriding or extending PrimeVue components for compatibility)

Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 6300
File: src/platform/updates/components/WhatsNewPopup.vue:5-13
Timestamp: 2025-12-09T03:50:03.127Z
Learning: In the Comfy-Org/ComfyUI_frontend repository, when avoiding PrimeVue components, prefer using the repo's common button components from src/components/button/ (IconButton.vue, TextButton.vue, IconTextButton.vue) rather than plain HTML buttons. These components wrap PrimeVue with custom design system styling.

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-21T06:04:12.562Z
Learning: Applies to **/*.vue : Leverage VueUse functions for performance-enhancing styles in Vue components

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.{vue,ts} : Leverage VueUse functions for performance-enhancing styles

6 changes: 3 additions & 3 deletions src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDefault.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<template>
<WidgetLayoutField :widget>
<Select
<SelectPlus
v-model="modelValue"
:invalid
:filter="selectOptions.length > 4"
:auto-filter-focus="selectOptions.length > 4"
auto-filter-focus
:options="selectOptions"
v-bind="combinedProps"
:class="cn(WidgetInputBaseClass, 'w-full text-xs')"
Expand All @@ -25,9 +25,9 @@
</template>

<script setup lang="ts">
import Select from 'primevue/select'
import { computed } from 'vue'

import SelectPlus from '@/components/primevueOverride/SelectPlus.vue'
import { useTransformCompatOverlayProps } from '@/composables/useTransformCompatOverlayProps'
import type { SimplifiedWidget } from '@/types/simplifiedWidget'
import { cn } from '@/utils/tailwindUtil'
Expand Down
19 changes: 9 additions & 10 deletions tests-ui/renderer/extensions/vueNodes/widgets/components/WidgetSelect.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
import { createTestingPinia } from '@pinia/testing'
import { mount } from '@vue/test-utils'
import PrimeVue from 'primevue/config'
import Select from 'primevue/select'
import type { SelectProps } from 'primevue/select'
import { beforeEach, describe, expect, it, vi } from 'vitest'

import SelectPlus from '@/components/primevueOverride/SelectPlus.vue'
import type { ComboInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
import type { SimplifiedWidget } from '@/types/simplifiedWidget'

import WidgetSelect from '@/renderer/extensions/vueNodes/widgets/components/WidgetSelect.vue'
import WidgetSelectDefault from '@/renderer/extensions/vueNodes/widgets/components/WidgetSelectDefault.vue'
import WidgetSelectDropdown from '@/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.vue'
Expand Down Expand Up @@ -76,7 +75,7 @@ describe('WidgetSelect Value Binding', () => {
},
global: {
plugins: [PrimeVue, createTestingPinia()],
components: { Select }
components: { SelectPlus }
}
})
}
Expand All @@ -85,7 +84,7 @@ describe('WidgetSelect Value Binding', () => {
wrapper: ReturnType<typeof mount>,
value: string
) => {
const select = wrapper.findComponent({ name: 'Select' })
const select = wrapper.findComponent({ name: 'SelectPlus' })
await select.setValue(value)
return wrapper.emitted('update:modelValue')
}
Expand Down Expand Up @@ -150,7 +149,7 @@ describe('WidgetSelect Value Binding', () => {
const widget = createMockWidget('', { values: [] })
const wrapper = mountComponent(widget, '')

const select = wrapper.findComponent({ name: 'Select' })
const select = wrapper.findComponent({ name: 'SelectPlus' })
expect(select.props('options')).toEqual([])
})

Expand All @@ -160,7 +159,7 @@ describe('WidgetSelect Value Binding', () => {
})
const wrapper = mountComponent(widget, 'only_option')

const select = wrapper.findComponent({ name: 'Select' })
const select = wrapper.findComponent({ name: 'SelectPlus' })
const options = select.props('options')
expect(options).toHaveLength(1)
expect(options[0]).toEqual('only_option')
Expand Down Expand Up @@ -228,7 +227,7 @@ describe('WidgetSelect Value Binding', () => {
},
global: {
plugins: [PrimeVue, createTestingPinia()],
components: { Select }
components: { SelectPlus }
}
})

Expand All @@ -247,7 +246,7 @@ describe('WidgetSelect Value Binding', () => {
},
global: {
plugins: [PrimeVue, createTestingPinia()],
components: { Select }
components: { SelectPlus }
}
})

Expand All @@ -271,7 +270,7 @@ describe('WidgetSelect Value Binding', () => {
},
global: {
plugins: [PrimeVue, createTestingPinia()],
components: { Select }
components: { SelectPlus }
}
})

Expand All @@ -290,7 +289,7 @@ describe('WidgetSelect Value Binding', () => {
},
global: {
plugins: [PrimeVue, createTestingPinia()],
components: { Select }
components: { SelectPlus }
}
})

Expand Down