Can't select item from custom autocomplete search bar (Vue.js/Vuetify.js)

Question

NOTE: I'm not using v-autocomplete or v-combobox because they aren't able to do certain things that I want.

I'm having trouble implementing an autcomplete search bar. The search bar does everything as expected except for one minor thing, and that is being able to select an item. When I hover over an item, the pointer changes to a hand indicating that it's clickable. Once "clicked", a @click event is supposed to call a method, but nothing happens when an item is "clicked".

I know what the problem is, but I'm struggling to find a solution for it. The problem stems from these parts:

<v-text-field //this is the input
    ...
    @focus="isFocused = true" @blur="isFocused = false"
    ...
></v-text-field>

<v-list v-show="queried_cards.length && isFocused"> //this is the list
    <v-list-item @click="setCard(card)" v-for="(card, index) in queried_cards" :item="card" :key="index">
        ...
    </v-list-item> 
</v-list>

So, based on the above markup, I only want to show the list if the array queried_cards is not empty and if v-text-field is focused on. If I click out of the textfield then the list is hidden, which is the desired outcome that I want. It just so happens that it conflicts with the functionality of being able to select an item since when you click on an item, that is the same as clicking out of the textfield (triggers @blur). This results in the method setCard() not being called since v-list disappears before the event @click="setCard(card)" can happen.

I've been putting this on backlog for awhile thinking I'll eventually be able to find a solution, but I'm just burnt out from all the other stuff from this project.

I created a codepen that illustrate my problem: https://codepen.io/chataolauj/pen/RwwYxBg?editors=1010

Hank X Hank X · Accepted Answer · 2020-05-21T02:19:21

the issue is you set the list <v-list v-if="queried_cards.length && isFocused" class="pa-0 overflow-y-auto" max-height="300" two-line>

when you clicking on the list item, the isFocused set to false because you bonded @blur="isFocused=false" on the input filed. so it disappeared. you need to figure out a way to keep the isFocused to true when you select the items.

quicky way:

on your v-container bind a click function (you want to when user click outside of the input or the result list, hide the result lit):

  <v-container fluid @click="checkHide">

    checkHide(e){
   // if click on input or the result list, keep the list to show
      if(e.target.tagName ==="INPUT" || e.target.classList.contains("v-list-item__content")){
        this.isFocused = true
      }else{
// click outside of them, hide it
        this.isFocused = false
      }
    }

on your input element, remove @blur.

Can't select item from custom autocomplete search bar (Vue.js/Vuetify.js)

1 Answers