vuetifyjs
[Feature Request] Missing close Event for v-select
Problem to solve
I need either an event when the selection list closes or the possibility to close it manually. There is a blur event, but it's not the same as close. You could also see this as a bug, because I think, that the components behaviour should be the same as for the native select, which closes on blur. This is not configurable for the v-select component.
Proposed solution
The list should close on blur or there should be a close event.
After looking at the code, I noted I can just call the blur method on blur event. Little bit weird to read and more a workaround than solution, but works.
<v-select ref="test" @blur="$refs.test.blur" :items="['foo', 'bar']" />
It is possible to add a watcher on isMenuActive data of v-select component. Trying to use documented events has failed for me, as many use cases doesn't trigger any event at all (ESC key, click an already selected value, click outside of the browser ...)
With the composition API and TypeScript, you can write something like this to emit a 'menu:active' event containing a boolean value as payload matching the open/close state of v-select menu.
<div>
<v-select ref="selectRef"></v-select>
</div>
setup (props, { emit }) {
const selectRef = ref<Vue & { isMenuActive: boolean } | null>(null)
watch(selectRef, (selectRefValue) => {
if (selectRefValue != null) {
watch(() => selectRefValue.isMenuActive, (active) => {
emit('menu:active', active)
})
}
})
return { selectRef }
}
It is possible to add a watcher on isMenuActive data of v-select component. Trying to use documented events has failed for me, as many use cases doesn't trigger any event at all (ESC key, click an already selected value, click outside of the browser ...)
With the composition API and TypeScript, you can write something like this to emit a 'menu:active' event containing a boolean value as payload matching the open/close state of v-select menu.
<div> <v-select ref="selectRef"></v-select> </div>setup (props, { emit }) { const selectRef = ref<Vue & { isMenuActive: boolean } | null>(null) watch(selectRef, (selectRefValue) => { if (selectRefValue != null) { watch(() => selectRefValue.isMenuActive, (active) => { emit('menu:active', active) }) } }) return { selectRef } }
wow this is quite advanced and sophisticated, and it works! Thanks ( documented here https://vuejs.org/guide/essentials/template-refs.html for those like me trying to understand what is going on )
i think there is an issue with timing to force isMenuActive to be false. So if I wrap it in timeout, this worked for me.
<v-select
ref="select"
@keydown="handleKeydown"
></v-select>
handleKeydown(e){
e.preventDefault()
if(this.$refs.select) {
e.stopPropagation()
setTimeout(()=>{
this.$refs.select.isMenuActive = false;
}, 10)
}
}
