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>>(), { const props = withDefaults(defineProps<SelectMenuProps<T, I, V, M>>(), {
portal: true, portal: true,
searchInput: true, searchInput: true,
labelKey: 'label' as never labelKey: 'label' as never,
resetSearchTermOnBlur: true
}) })
const emits = defineEmits<SelectMenuEmits<T, V, M>>() const emits = defineEmits<SelectMenuEmits<T, V, M>>()
const slots = defineSlots<SelectMenuSlots<T, M>>() const slots = defineSlots<SelectMenuSlots<T, M>>()
@@ -251,13 +252,27 @@ function onUpdate(value: any) {
} }
function onUpdateOpen(value: boolean) { function onUpdateOpen(value: boolean) {
let timeoutId
if (!value) { if (!value) {
const event = new FocusEvent('blur') const event = new FocusEvent('blur')
emits('blur', event) emits('blur', event)
emitFormBlur() 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 { } else {
const event = new FocusEvent('focus') const event = new FocusEvent('focus')
emits('focus', event) emits('focus', event)
clearTimeout(timeoutId)
} }
} }
</script> </script>