When I click on the button, multiselect opens. But when I click on the button a second time, the true / false values flash and as a result, isOpen remains true. What am I doing wrong?
template:
<div id="app">
<button @click="toggle">open and close later
</button>
<pre>{{ isOpen }}</pre>
<multiselect
ref="multiselect"
v-model="value"
:options="options"
:multiple="true"
track-by="library"
:custom-label="customLabel"
@close="isOpen = false"
@open="isOpen = true"
>
</multiselect>
</div>
js:
new Vue({
components: {
Multiselect: window.VueMultiselect.default
},
data: {
isOpen: false,
value: { language: 'JavaScript', library: 'Vue-Multiselect' },
options: [
{ language: 'JavaScript', library: 'Vue.js' },
{ language: 'JavaScript', library: 'Vue-Multiselect' },
{ language: 'JavaScript', library: 'Vuelidate' }
]
},
methods: {
toggle () {
if (this.isOpen) {
this.$refs.multiselect.$el.blur();
this.isOpen = false;
}
else {
this.$refs.multiselect.$el.focus();
this.isOpen = true;
}
}
}
}).$mount('#app')
As I dug the source code of this component, unfortunately, I realized there is not any "legit" way to make works your requirement. @blur callback will be called no matter what. There is no way to regulate this behavior.
Workaround: some aspect of locking with a cooldown time...
new Vue({
components: {
Multiselect: window.VueMultiselect.default
},
data: {
blocked: false,
value: { language: 'JavaScript', library: 'Vue-Multiselect' },
options: [
{ language: 'JavaScript', library: 'Vue.js' },
{ language: 'JavaScript', library: 'Vue-Multiselect' },
{ language: 'JavaScript', library: 'Vuelidate' }
]
},
methods: {
toggle () {
if (!this.blocked) {
this.$refs.multiselect.toggle();
}
},
block () {
this.blocked = true;
setTimeout(() => {
this.blocked = false;
}, 200);
}
}
}).$mount('#app')