While using Bootstrap-Vue, how do you prevent a b-dropdown from closing when clicking on a nested b-input component?

Question

I'm pretty sure I just don't understand how to implement Vue's Event Modifiers. According to that documentation, all I have to do is add this:

<!-- the click event's propagation will be stopped -->
<a v-on:click.stop="doThis"></a>

Here's how I interpreted the example into my pug code:

b-dropdown(text="Actions")
  b-dropdown-item
    b-form(inline)
      .row
        .col
          b-input(@click.stop='' placeholder="#123")
          b-button(:href='printCheck' variant="primary") Print Check

It looks pretty simple, however it's not working as expected. If you need more supporting info, just ask. And feel free to tweak the title; I wasn't sure if my question is a vue, bootstrap-vue, or javascript question.

Thanks for your time in advance,
Kevin

Boussadjra Brahim · Accepted Answer · 2018-12-05 22:18:11Z

5

Since you're clicking on a component you should combine .native with .stop modifiers like so :

 b-input(@click.native.stop='' placeholder="#123")

if you're using a simple HTML element like input you could use only .stop modifier:

 input(@click.stop='' placeholder="#123")

answered Dec 5, 2018 at 22:18

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

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

1 Comment

RudyOnRails Over a year ago

I think that did the trick! I just played with this code snippet at bootstrap-vue.js.org/docs/components/dropdown# and it worked:

<div>   <b-dropdown id="ddown1" text="Dropdown Button" class="m-md-2">     <b-dropdown-item>       <b-form>         <b-input @click.native.stop placeholder="check number"></b-input>       </b-form>     </b-dropdown-item>   </b-dropdown> </div>

Troy Morehouse · Accepted Answer · 2019-05-16 03:21:01Z

3

You can now use the new <b-dropdown-form> sub-component for placing input fields into dropdowns.

You should avoid placing input controls inside <b-dropdown-item> (which renders an <a> as it's root element), or <b-dropdown-item-button> (which renders a <button> as its root element). HTML5 doesn't like interactive elements inside <a> or <button> elements.

<b-dropdown-form> does not auto-close the dropdown when it is clicked.

edited May 16, 2019 at 3:21

answered May 14, 2019 at 0:08

Troy Morehouse

5,4451 gold badge30 silver badges40 bronze badges

Collectives™ on Stack Overflow

While using Bootstrap-Vue, how do you prevent a b-dropdown from closing when clicking on a nested b-input component?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related