mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-12 00:20:15 +00:00
20d06f92ca
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>
77 lines
2.1 KiB
Vue
77 lines
2.1 KiB
Vue
<template>
|
|
<WidgetLayoutField :widget>
|
|
<SelectPlus
|
|
v-model="modelValue"
|
|
:invalid
|
|
:filter="selectOptions.length > 4"
|
|
auto-filter-focus
|
|
:options="selectOptions"
|
|
v-bind="combinedProps"
|
|
:class="cn(WidgetInputBaseClass, 'w-full text-xs')"
|
|
:aria-label="widget.name"
|
|
size="small"
|
|
:pt="{
|
|
option: 'text-xs',
|
|
dropdown: 'w-8',
|
|
label: cn('truncate min-w-[4ch]', $slots.default && 'mr-5'),
|
|
overlay: 'w-fit min-w-full'
|
|
}"
|
|
data-capture-wheel="true"
|
|
/>
|
|
<div class="absolute top-5 right-8 h-4 w-7 -translate-y-4/5 flex">
|
|
<slot />
|
|
</div>
|
|
</WidgetLayoutField>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
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'
|
|
import {
|
|
PANEL_EXCLUDED_PROPS,
|
|
filterWidgetProps
|
|
} from '@/utils/widgetPropFilter'
|
|
|
|
import { WidgetInputBaseClass } from './layout'
|
|
import WidgetLayoutField from './layout/WidgetLayoutField.vue'
|
|
|
|
interface Props {
|
|
widget: SimplifiedWidget<string | undefined>
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
const modelValue = defineModel<string | undefined>({
|
|
default(props: Props) {
|
|
return props.widget.options?.values?.[0] || ''
|
|
}
|
|
})
|
|
|
|
// Transform compatibility props for overlay positioning
|
|
const transformCompatProps = useTransformCompatOverlayProps()
|
|
|
|
// Extract select options from widget options
|
|
const selectOptions = computed(() => {
|
|
const options = props.widget.options
|
|
|
|
if (options?.values && Array.isArray(options.values)) {
|
|
return options.values
|
|
}
|
|
|
|
return []
|
|
})
|
|
const invalid = computed(
|
|
() => !!modelValue.value && !selectOptions.value.includes(modelValue.value)
|
|
)
|
|
|
|
const combinedProps = computed(() => ({
|
|
...filterWidgetProps(props.widget.options, PANEL_EXCLUDED_PROPS),
|
|
...transformCompatProps.value,
|
|
...(invalid.value ? { placeholder: `${modelValue.value}` } : {})
|
|
}))
|
|
</script>
|