NOTE: I have opted not to use v-autocomplete or v-combobox due to their limitations in meeting my specific requirements.
I'm facing difficulties while setting up an autocomplete search bar. The search functionality works perfectly except for one minor issue - selecting an item. When hovering over an item, a hand cursor appears indicating its clickability. Upon clicking the item, an @click event should trigger a method, but unfortunately, nothing happens.
Identifying the root cause of the problem is clear to me, however finding a solution has been challenging. The issue arises from the following parts:
<v-text-field //here's the input
...
@focus="isFocused = true" @blur="isFocused = false"
...
></v-text-field>
<v-list v-show="queried_cards.length && isFocused"> //this represents the list
<v-list-item @click="setCard(card)" v-for="(card, index) in queried_cards" :item="card" :key="index">
...
</v-list-item>
</v-list>
In summary, according to the above code structure, I aim to display the list only if the array queried_cards is not empty and if the v-text-field is focused on. Concealing the list when clicking outside the text field aligns with the intended outcome. However, this behavior conflicts with the item selection functionality, as clicking on an item is equivalent to clicking out of the text field (triggering @blur). Consequently, the setCard() method fails to execute since the v-list disappears before the @click="setCard(card)" event.
This issue has been lingering as I hoped to find a resolution eventually. Unfortunately, I am currently overwhelmed by other project tasks.
To better illustrate my problem, I have created a codepen: https://codepen.io/chataolauj/pen/RwwYxBg?editors=1010