Fix error on close of combo dropdown (#7804)

Apparently, enabling autofocus causes primevue to also attempt focusing
the searchbox one frame after closing.

I have no idea why this behaviour would ever be beneficial, but this PR
adds an override to prevent this behaviour and clean up the console
spam.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7804-Fix-error-on-close-of-combo-dropdown-2d96d73d365081f8b677e3e4aaadb51b)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Alexander Brown <drjkl@comfy.org>

src/components/primevueOverride/SelectPlus.vue

@@ -0,0 +1,19 @@
+<script>
+import Select from 'primevue/select'
+
+export default {
+  name: 'SelectPlus',
+  extends: Select,
+  emits: ['hide'],
+  methods: {
+    onOverlayLeave() {
+      this.unbindOutsideClickListener()
+      this.unbindScrollListener()
+      this.unbindResizeListener()
+
+      this.$emit('hide')
+      this.overlay = null
+    }
+  }
+}
+</script>

src/renderer/extensions/vueNodes/widgets/components/WidgetSelect.test.ts

@@ -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'
@@ -76,7 +75,7 @@ describe('WidgetSelect Value Binding', () => {
       },
       global: {
         plugins: [PrimeVue, createTestingPinia()],
-        components: { Select }
+        components: { SelectPlus }
       }
     })
   }
@@ -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')
   }
@@ -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([])
     })
 
@@ -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')
@@ -228,7 +227,7 @@ describe('WidgetSelect Value Binding', () => {
         },
         global: {
           plugins: [PrimeVue, createTestingPinia()],
-          components: { Select }
+          components: { SelectPlus }
         }
       })
 
@@ -247,7 +246,7 @@ describe('WidgetSelect Value Binding', () => {
         },
         global: {
           plugins: [PrimeVue, createTestingPinia()],
-          components: { Select }
+          components: { SelectPlus }
         }
       })
 
@@ -271,7 +270,7 @@ describe('WidgetSelect Value Binding', () => {
         },
         global: {
           plugins: [PrimeVue, createTestingPinia()],
-          components: { Select }
+          components: { SelectPlus }
         }
       })
 
@@ -290,7 +289,7 @@ describe('WidgetSelect Value Binding', () => {
         },
         global: {
           plugins: [PrimeVue, createTestingPinia()],
-          components: { Select }
+          components: { SelectPlus }
         }
       })
 

src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDefault.vue

@@ -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')"
@@ -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'