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?

Answer 1

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>