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 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.