How to stop v-click-outside from triggering on internal v-select components

user_9719921 0
Viewed 1022

I've been trying to make a card component that closes if you click anywhere on the outside. But the issue is that v-click-outside gets triggered when I click on an item in the v-select dropdown menu inside of that card. How do I prevent child components from triggering v-click-outside?

<v-card v-click-outside="handleClickOutside">
   <v-select
     :items="items"
     v-model="currentItem"
   ></v-select>
</v-card>
vue-component vuetify.js vue.js
1 Answers

According to v-click-outside documentation, it accepts "A callback or options object.". Object looks like this:

{
  handler: (e: Event) => void,
  closeConditional ? : (e: Event) => boolean,
  include ? : () => HTMLElement[]
}

For handler pass your function and for include you have to specify HTML element (example). To prevent trigger v-click-outside when you are using v-select you need to include .v-select-list.

In your case the solution will look like this:

<v-card v-click-outside="{
    handler: handleClickOutside,
    include: includeFunction
}">
...

<script>
  ...
  methods: {
    includeFunction(){
        //visible elements
        const tempArray = [document.querySelector('.included')]
         
          if (document.querySelector('.v-select-list')) {
            //push the element to array when it is visible
            arr.push(document.querySelector('.v-select-list'))
            
          }
          return tempArray
    }
    ...
  }
</script>

user_61239650
Related