Dropdown needs two clicks to open

[joshvillbrandt]

When upgrading from 0.10 to 0.11, drop-down menus started requiring two clicks in order to open (at least for nav-bar drop-down menus.) Removing data-toggle="dropdown" from the primary toggle element fixes the problem, but this is no longer the bootstrap-suggested syntax.

I suggest making a clear note of this in the documentation or make the dropdown directive compatible with the standard bootstrap syntax (like it was in 0.10.)

[jacqueslareau]

+1

Took a while to find out the culprit!

[chrisirhc]

I believe you're including the bootstrap.min.js / bootstrap.js on top of ui-bootstrap.js . That's not compatible with the Angular UI Bootstrap JavaScript as the Bootstrap's code would interfere with UI Bootstrap's code. Could you create a Plunker that demonstrates this?

[alexander-konovalov]

I created a Plunker http://plnkr.co/edit/osRsf6CTiQTFG7LpDt09?p=preview
Included: bootstrap.js and ui-bootstrap.js

At this page I do not use "dropdown" directive anywhere (In my opinion - as attribute)
"Button dropdown" is correct, but drop-down in header menu required two clicks because ui-bootstrap.js conflicts.

I think it's a bug, because I not set "dropdown" directive attribute explicitly.

[admitriyev]

I observed the same issue when I upgraded from 0.10 to 0.11. When I change nothing else and revert back to 0.10, it works fine. I don't include bootsrap.js, but I use a bootswatch theme (Yeti) that loads bootstrap. Here is what I see in the final (produced by Rails) HTML:

<link href="/assets/yeti.css?body=1" media="all" rel="stylesheet">
<link href="/assets/yeti/loader.css?body=1" media="all" rel="stylesheet">
<link href="/assets/yeti/bootswatch.css?body=1" media="all" rel="stylesheet">

<script src="/assets/jquery.js?body=1"></script>
<script src="/assets/jquery_ujs.js?body=1"></script>
<script src="/assets/twitter/bootstrap/transition.js?body=1"></script>
<script src="/assets/twitter/bootstrap/alert.js?body=1"></script>
<script src="/assets/twitter/bootstrap/button.js?body=1"></script>
<script src="/assets/twitter/bootstrap/carousel.js?body=1"></script>
<script src="/assets/twitter/bootstrap/collapse.js?body=1"></script>
<script src="/assets/twitter/bootstrap/dropdown.js?body=1"></script>
<script src="/assets/twitter/bootstrap/modal.js?body=1"></script>
<script src="/assets/twitter/bootstrap/tooltip.js?body=1"></script>
<script src="/assets/twitter/bootstrap/popover.js?body=1"></script>
<script src="/assets/twitter/bootstrap/scrollspy.js?body=1"></script>
<script src="/assets/twitter/bootstrap/tab.js?body=1"></script>
<script src="/assets/twitter/bootstrap/affix.js?body=1"></script>
<script src="/assets/yeti/loader.js?body=1"></script>
<script src="/assets/yeti/bootswatch.js?body=1"></script>
<script src="/assets/angular.js?body=1"></script>
<script src="/assets/ui-bootstrap-tpls-0.11.0.min.js?body=1"></script>
<script src="/assets/ng-grid-2.0.11.min.js?body=1"></script>

[alexander-konovalov]

Сool! Thank you!

2014-06-20 20:00 GMT+06:00 istibekesi notifications@github.com:

Ahhh, so change the order of the included js files, and place
ui-bootstrap-tpls first simply solves the issue... (?)

http://plnkr.co/edit/4DwcDJ2H9jyFS7Yo3oXd

—
Reply to this email directly or view it on GitHub
#2294 (comment)
.

[petermajor]

I'm having the same issue

If I remove the UI-bootstrap script then the dropdown opens fine.

If I include the UI-bootstrap script then the dropdown doesn't open on the first click.

I've tried re-ordering the script blocks (mine are at the bottom of the page) and it doesn't make any difference if UI-bootstrap is before or after bootstrap.js....

[istibekesi]

Sorry, I deleted my previous misleading post, because re-ordering makes no sense... In the plunk it seemed to be working, but the only reason why dropdown was working is that the whole bootstrap-ui js was broken.
Bootstrap ui needs to be placed after the angular.js...

However, change the version back to 0.10.0 was solved the dropdown issue in the navbar, but breaks other things, for example alert. I'm getting to be very confused:
http://plnkr.co/edit/49F6MRlGFxKo5RB2oEIN

[alexander-konovalov]

You can temporarily use version 0.11.0 but without including ui.bootstrap.dropdown dependency.
Do not include "ui.bootstrap" and include only required modules

[sylvain-hamel]

@chrisirhc regarding

you're including the bootstrap.min.js / bootstrap.js on top of ui-bootstrap.js . That's not compatible with the Angular UI Bootstrap JavaScript

Does it mean Angular UI Bootstrap includes all the features of bootstrap.js or does it mean we have to use the individual bootstrap.js parts that don't overlap with Angular UI Bootstrap?

[seyyedi]

You have to remove the data-toggle attribute. dropdown-toggle directive already takes care of toggling. I had also some issues with <a href="#"> and resolved them by using <a href="javascript:void(0);"> (dropdown didn't always close)

[sylvain-hamel]

@seyyedi Thanks a lot!

[herrminni]

Thank you, I can confirm, that removing "data-toggle='dropdown'" works.
angul ui-bootstrap v0.11.0
Bootstrap v3.2.0

[Snede]

If you add data-disabled="true" on the element, you disable the angular-ui part and can use plain bootstrap.

We have a website where jquery(legacy) and Angular are mixed together.

[ruben-dossantos]

@Snede answer works for me ;)

Thank you