Prevent Vue bootstrap-dropdown from closing after click

Question

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.

tao · Accepted Answer · 2024-09-20 09:04:51Z

14

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>

As @GiorgioTempesta mentioned in a comment below, in Vue3 the .native should be removed. See v-on.native modifier removed (breaking change).

edited Sep 20, 2024 at 9:04

answered Apr 20, 2020 at 19:13

tao

91.1k18 gold badges138 silver badges174 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Giorgio Tempesta Over a year ago

In Vue 3 it works but you have to remove the .native modifier, so just add @click.capture.stop.

Yadab Sutradhar · Accepted Answer · 2020-04-20 18:56:26Z

1

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>

answered Apr 20, 2020 at 18:56

Yadab Sutradhar

6696 silver badges10 bronze badges

2 Comments

tao Over a year ago

Don't reopen the dropdown instead of preventing it from closing. If any functionality is bound on dropdown open event it will also run when you click inside it. It's not scale-able.

Yadab Sutradhar Over a year ago

Similarly, sometimes it's needed to keep functionality same but changing of UI. It's only needed to hide or show, not relating to stop it's attitude.

Andi · Accepted Answer · 2022-02-15 14:13:19Z

0

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

answered Feb 15, 2022 at 14:13

Andi

12 bronze badges

Collectives™ on Stack Overflow

Prevent Vue bootstrap-dropdown from closing after click

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related