Prevent Vue bootstrap-dropdown from closing after click

2
votes

How can I change the behaviour of a b-dropdown-item-button within a b-dropdown-component so that it does not close automatically when I click on it?

The dropdown is syntactically structured as follows:

<b-dropdown>
    <b-dropdown-item-button>
        <span>Mark as read</span>
    <b-dropdown-item-button>

    <b-dropdown-group>
// Messages are output here
    </b-dropdown-group>
</bdropdown>

Now I wonder how I can prevent the dropdown from closing when I click on the b-dropdown-item-button.

3
vue.jsbootstrap-4bootstrap-vue

3 Answers

9
votes

Placing @click.native.capture.stop directive on any subcomponent of <b-dropdown> will prevent it from closing the dropdown.

For example:

<b-dropdown>
  <b-dropdown-item-button @click.native.capture.stop>
    <span>Mark as read</span>
  <b-dropdown-item-button>

  <b-dropdown-group @click.native.capture.stop>
    // no click will exit the parent, therefore they won't close the dropdown
  </b-dropdown-group>
</bdropdown>
1
votes
  • First: make a reference which you want to stay show (i.e, b-drowpdown)
  • then make an function onClick which will work on click of button
  • finally remain shown the dropdown by this.$refs.dropdown.show(true) which override the defaults
<template>
    <b-dropdown ref="dropdown">
        <b-dropdown-item-button @click="onClick">
            <span>Mark as read</span>
        <b-dropdown-item-button>

        <b-dropdown-group>
    // Messages are output here
        </b-dropdown-group>
    </b-dropdown>
</template>
<script>
  export default {
    methods: {
      onClick() {
        this.$refs.dropdown.show(true)
      }
    }
  }
</script>
0
votes

Add a prevent modifier @click.prevent to the element which shouldn't close the dropdown on click:

<b-dropdown>
  <b-dropdown-text>
     <b-form-input @click.prevent></b-form-input>
  </b-dropdown-text>
</b-dropdown>

Docs:
https://v2.vuejs.org/v2/guide/events.html#Event-Modifiers