Stop Angular UI bootstrap dropdown from closing in certain cases?

Question

I have a dropdown which contains tabs and buttons. I want to be able to click the tabs without the dropdown closing but if I click a button it will close.

I used $event.stopPropagation() to stop the closing but obviously this blocks the buttons closing it too.

Is there a way to do this?

Why not keep the stopPropagation() and close the dropdown yourself in the buttons' ng-click handlers? (And set the auto-close option on the dropdown to outsideClick or disabled) — tavnab
– tavnab, Commented Jun 13, 2015 at 13:24
I had the stopPropagation() on the tabset, this block everything. outsideClick seem to work in a plunker I make but not in my app, odd. — TrialName
– TrialName, Commented Jun 13, 2015 at 13:48
I was working off angular ui bootstrap 0.13.0, moving to 0.13.1 made it work again. I was a known bug. — TrialName
– TrialName, Commented Jun 13, 2015 at 14:24

isherwood · Accepted Answer · 2016-01-27 15:31:08Z

10

By default the dropdown will automatically close if any of its elements is clicked, you can change this behavior by setting the auto-close option as follows:

always - (Default) automatically closes the dropdown when any of its elements is clicked.

outsideClick - closes the dropdown automatically only when the user clicks any element outside the dropdown.

disabled - disables the auto close. You can then control the open/close status of the dropdown manually, by using is-open. Please notice that the dropdown will still close if the toggle is clicked, the esc key is pressed or another dropdown is open.

Here is a sample : Plunker

    <div class="btn-group" dropdown auto-close="disabled">
      <button type="button" class="btn btn-danger">Action</button>
      <button type="button" class="btn btn-danger dropdown-toggle" dropdown-toggle>
        <span class="caret"></span>
        <span class="sr-only">Split button!</span>
      </button>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>

edited Jan 27, 2016 at 15:31

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

answered Jun 13, 2015 at 13:25

Stefan Dimov

6115 silver badges11 bronze badges

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

3 Comments

Luke Rice Over a year ago

Any ideas how to do this with angular-bootstrap v0.12.1? I copied your code directly in and it does not appear to work. Thanks.

Umer Hassan Over a year ago

Can we disable the auto-close on some specific li element?

user287474 Over a year ago

Is there a way to do the same thing, to autoClose outside click but in vanilla js? I am been trying e.stopPropagation and it isn't working.

Collectives™ on Stack Overflow

Stop Angular UI bootstrap dropdown from closing in certain cases?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related