title: Bootstrap Vue - Prevent dropdown close on click outside
body: <p>I'm using Bootstrap-Vue and I would like my dropdown to never hide until a button calls a function. My issue is that, by default, clicking outside the dropdown or on the dropdown button hide the dropdown. My template is:</p>
  <pre class="lang-html prettyprint-override"><code>    &lt;b-dropdown
        ref=&quot;dropdown&quot;
        @hide=&quot;onEditControlMenuHide&quot;
        @click.native.stop&gt;
        &lt;b-dropdown-form&gt;
          &lt;b-dropdown-item-button
            @click=&quot;closeDropdown&quot;
            &gt;I'm a button
          &lt;/b-dropdown-item-button&gt;
        &lt;/b-dropdown-form&gt;
      &lt;/b-dropdown&gt;
  </code></pre>
  <p>And then I have simple methods in my script:</p>
  <pre class="lang-js prettyprint-override"><code>    closeDropdown() {
        this.$refs.dropdown.hide()
      },
  
      onEditControlMenuHide(bvEvent) {
        bvEvent.preventDefault()
      },
  </code></pre>
  <p>I tried to catch the <code>bvEvent</code> in a function to process where the event comes from, but I find nothing in the event that differentiate hide on click outside, hide on click the dropdown button, or hide because on my custom button.
  I read that it was maybe because of event bubbling, so I tried to use <code>@click.native.stop</code> but it doesn't work. Any help would be appreciated!</p>