Dropdown closes after every click

Question

Dropdown closes after every mouse click. The dropdown should close only after hitting the "Close (X)" button. How can I do that? Plunk:

http://plnkr.co/edit/7mcBoyfbrT3FNl2vJLjh?p=preview

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

  </head>

  <body>
    <h1>Hello Plunker!</h1>
    <div class="btn-group">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
            Action <span class="caret"></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>
  </body>
</html>

see this answer. http://stackoverflow.com/questions/25089297/twitter-bootstrap-avoid-dropdown-menu-close-on-click-inside — jad-panda, Jun 02 '15 at 16:01

score 4 · Accepted Answer · edited May 23 '17 at 12:22

If you want to do this in native bootstrap then this answer is right.

But, I would recommend you using angular ui bootstrap (https://angular-ui.github.io/bootstrap/). as, you are using angular.js(in plunker) and angular ui bootstrap provides all bootstrap components as directives. and you won't have to write angular wrapper around native bootstrap components.

Luckily, dropdown in angular ui bootstrap provides option for auto-close which you can set to outsideClick so it won't close when you click inside inside dropdown.

Angular UI Bootstrap Dropdown Docs

See the working example below.

var app = angular.module('app', ['ui.bootstrap']);

app.controller('ctrl', function($scope) {

  $scope.closeDropDown = function() {
    $scope.isopen = false;
  };
  
});

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script>

<div ng-app="app">
  <div ng-controller="ctrl">
    <div class="btn-group" dropdown is-open="isopen" auto-close="outsideClick">
      <button type="button" class="btn btn-default dropdown-toggle" dropdown-toggle>
        Options <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a>
          <ul>
            <label class="checkbox">
              <input type="checkbox">Open
            </label>
          </ul>
          <ul>
            <label class="checkbox">
              <input type="checkbox">Close
            </label>
          </ul>
        </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>
        <li class="divider"></li>
        <li>
          <button type="button" ng-click="closeDropDown()">Close (X)</button>
        </li>
      </ul>
    </div>

  </div>
</div>

This module is working exactly the way I wanted. But, with I plugged it in my HTML page, it get a error saying "Attribute auto close is not allowed". What can I do to debug the errors? — annu025, Jun 02 '15 at 19:30
Yes I am, i include in my HTML and angular.module('mySupport', ['ui.bootstrap']); in my JS. — annu025, Jun 02 '15 at 19:41
can you create jsfiddle or plunker so i can take a look at the code ? without seeing code i can't say what's going wrong in it. — jad-panda, Jun 02 '15 at 19:44
I have commented out all the other HTML code so that it is easier for you to check on the code. — annu025, Jun 02 '15 at 20:25
@Anu see this http://plnkr.co/edit/1d3rZl7D3aiRNQZpUF1E?p=preview. I have added CDN links for angular ui bootstrap files. commented some of the unnecessary code. and also did changes in `app.js`. there is no need of using _angular ui bootstrap_ and _native bootstrap_ both choose one of them. — jad-panda, Jun 02 '15 at 20:51
Do you have any idea on this: http://stackoverflow.com/questions/32367621/unable-to-display-right-tick-mark-in-checkbox-in-tablets-and-ipad — Smitha, Sep 14 '15 at 06:00

Dropdown closes after every click

1 Answers1