Vuejs On Blur For Custom Select Element Not Working

Scenario I've built custom autocomplete select component where it autocompletes but in addition, if the result is not found we can add new value.(I found it is not possible in vue-

Solution 1:

I have same problem with you before.

The problem is blur event will be fired first, it will hide the list of selection. Then click event will not be fired.

My solution is replacing @click with @mousedown event

<div v-for="(item,index) in filterList" 
     :class="{'my-dropdwon--item':true,active:index === pointer}"@mousedown="handleItemClick(item)"@mouseover="pointer = index">
    {{item}}
</div>

Check my demo at https://codepen.io/ittus/pen/qYKRPv