I have an autocomplete input, and when I click on an element, it does something. For simplification purposes, the thing is here "console.log(element)". The thing is that when I click an element, it blurs the input, and blurring the input destroys the elements of the list.
If I wait a few milliseconds, the click event is handled, but if not, it only takes into account the blur event. I made an example with the two options:
var app = new Vue({
el: '#app',
data: {
list: ['1', '2'],
},
methods: {
handleBlurWithPause: async function () {
await new Promise((r) => setTimeout(r, 300));
console.log('Blurred with pause');
this.list = [];
},
handleBlur: function () {
console.log('Blurred');
this.list = [];
},
handleClick: function (e) {
console.log(e);
},
resetList: function () {
this.list = ['1','2'];
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input
placeholder="With pause"
type="text"
@blur="handleBlurWithPause" />
<input
placeholder="Without pause"
type="text"
@blur="handleBlur" />
<ul>
<li
v-for="elt in list"
@click="handleClick(elt)">
{{ elt }}
</li>
</ul>
<button
@click="resetList">
Reset
</button>
</div>My question is: is there a better way to wait for the click event before handling the blur event? The async/await line seems very amateur for me.
Thanks in advance.