Unique Scenario
A custom autocomplete select component has been created that not only autocompletes but also allows for adding a new value if the result is not found. This functionality was discovered to be missing in the vue-select module.
Inquiry
An attempt was made using @blur, however, it resulted in the menu closing when clicking on an item. A custom div serves as the list of items for selection, toggling based on text field focus. Removing blur resolves the issue but prevents the menu from closing upon clicking outside the text field. The functions for handling keyup, keydown, keyenter, scrolling, and pointer selection were copied from vue-select.
Customized CODE Snippet
<template>
<div class="vselect">
<div class="form-group">
<label>{{label}}</label>
<p class="control has-icon has-icon-right">
<input ref="selected" @keyup="filterSelect($event)" @focus="onFocus" v-model="mutableValue" type="text" class="form-control"
@keydown.up.prevent="onKeyUp" @keydown.down.prevent="onKeyDown" @keydown.enter.prevent="onKeyEnter" @blur="onBlur">
</p>
</div>
<div ref="dropdown" class="my-dropdown" v-show="toggled" v-if="options">
<div v-for="(item,index) in filterList" :class="{'my-dropdwon--item':true,active:index === pointer}" @click="handleItemClick(item)"
@mouseover="pointer = index">{{item}}</div>
</div>
</div>
</template>
<script>
// JavaScript logic goes here...
</script>
<style scoped>
// CSS styling goes here...
</style>