fix(SelectMenu): handle resetSearchTermOnBlur manually (#3082)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
kyyy
2025-01-13 17:26:16 +07:00
committed by GitHub
parent 1a54ab231b
commit c902a40f7c

View File

@@ -151,7 +151,8 @@ import UInput from './Input.vue'
const props = withDefaults(defineProps<SelectMenuProps<T, I, V, M>>(), {
portal: true,
searchInput: true,
labelKey: 'label' as never
labelKey: 'label' as never,
resetSearchTermOnBlur: true
})
const emits = defineEmits<SelectMenuEmits<T, V, M>>()
const slots = defineSlots<SelectMenuSlots<T, M>>()
@@ -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)
}
}
</script>