Popover not closing when clicking outside its focus area

Question

I'm using Bootstrap Vue with Vue.js and am experiencing a problem where I'm iterating over some items and displaying them to the user.

The issue is, when a user clicks on one of the popovers, every popover that was opened gets closed (as I desire), but when the user clicks outside the focus area of the targeted (opened) popover, it doesn't close anymore.

It looks like the opening animation runs every time the user clicks on the targeted popover.

Here is the code:

 <template> <div> <div class="row" v-for="(n, i) in 5" :key="n"> <div :id="'popover' + visitor.id + '-' + i" @click="$root.$emit('bv::hide::popover')"> <div class="card"> <b-popover :target="'popover' + visitor.id + '-' + i"> <template slot="title"> Edit image <button class="close-popover" @click="$root.$emit('bv::hide::popover', 'popover' + visitor.id + '-' + i)" >X</button> </template> </b-popover> </div> </div> </div> </div> </template>

Any help is appreciated!

Answer 1

You can use this function in created

created(){
    document.getElementsByTagName('body')[0].addEventListener('click', e => {
      this.$root.$emit('bv::hide::popover')
    });
},

Answer 2

You can set triggers="click blur" on the popover. This will close it when the user clicks outside of the popover or on the target.

You can check more HERE .

Answer 3

Add this Jquery to your code and it will work, probably.

 $('body').on('click', function (e) {
        $('[target=popover]').each(function () {
            if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
                $(this).popover('hide');
            }
        });
    });

Also you can try this:

You can add this to your code and try.

 <a class="close" href="#">Close</a>  

Also add this jquery:

 $('.close').click(function() {
       $(".class").fadeOut(300);
    });

Answer 4

A possible solution is the vue directive v-click-outside .

Basically, you just install it: npm install --save v-click-outside

And use:

<template>
  <div v-click-outside="onClickOutside"></div>
</template>