diff --git a/src/runtime/components/SelectMenu.vue b/src/runtime/components/SelectMenu.vue index bc6080877e..e93ffe7461 100644 --- a/src/runtime/components/SelectMenu.vue +++ b/src/runtime/components/SelectMenu.vue @@ -151,7 +151,8 @@ import UInput from './Input.vue' const props = withDefaults(defineProps>(), { portal: true, searchInput: true, - labelKey: 'label' as never + labelKey: 'label' as never, + resetSearchTermOnBlur: true }) const emits = defineEmits>() const slots = defineSlots>() @@ -251,13 +252,27 @@ function onUpdate(value: any) { } function onUpdateOpen(value: boolean) { + let timeoutId + if (!value) { const event = new FocusEvent('blur') + emits('blur', event) emitFormBlur() + + // Since we use `displayValue` prop inside ComboboxInput we should reset searchTerm manually + // https://reka-ui.com/docs/components/combobox#api-reference + if (props.resetSearchTermOnBlur) { + const STATE_ANIMATION_DELAY_MS = 100 + + timeoutId = setTimeout(() => { + searchTerm.value = '' + }, STATE_ANIMATION_DELAY_MS) + } } else { const event = new FocusEvent('focus') emits('focus', event) + clearTimeout(timeoutId) } }