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.

[xumbino]

@Snede answer works for me ;)

Thank you

[dmytro-shchurov]

@seyyedi, @Snede, thank you so much )

[diazruy]

FWIW, with @Snede's solution make sure the attribute is actually set to true (i.e. data-disabled="true") and not just present (i.e. data-disabled). The latter will not work.

[stewwan]

same issue here, all worked fine when removed data-toggle. thx =D

[cebor]

for now the workaround works, but 👍 for a fix !

[armengabrielyan]

+1, but workaround works

[richardthombs]

Glad I found this bug. Took a bit of Google-fu to get the keywords right :)

FWIW I removed my own reference to bootstrap.min.js - simply including angular-ui-bootstrap's javascript is sufficient to get "raw" Bootstrap dropdowns to work.

[davisford]

Can someone explain why it is now necessary to remove the dropdown-toggle attribute? I am defnitely not including any bootstrap javascript, but I'm trying to upgrade to angular 1.3.2.* and angular-ui 0.11.0 and it is a painful experience because so many things appear broken.

dropdown-toggle is still listed in the docs as necessary. Will removing this end up hosing it later down the line, when we pull another upgrade?

[chrisirhc]

This library currently doesn't support AngularJS 1.3. We're working towards that. Please report new issues that you find with your upgrade if they haven't already been reported.

[richardm]

+1. Removing data-toggle="dropdown" fixes this issue

[davisford]

@chrisirhc thanks for the feedback. So, pulling bower install angular-ui-bootstrap-bower@latest this fix indeed works, i.e. removing data-toggle="dropdown".

I believe the latest version released in the bower repo is 0.11.2

However, that version has several other things broken with respect to Angular 1.3.2 (e.g. tooltip broken).

So, I pulled from master and built my own today -- i.e. tracking 0.12-SNAPSHOT, and when I use that, this fix no longer works. Dropdowns don't seem to work anymore with or with out the data-toggle="dropdown" attribute.

Any idea?

Update Edit: actually, this markup fails:

<div dropdown class='btn-group'>
  <a type='button' role='button' class='btn btn-info dropdown-toggle'>Click</a>
  <ul class='dropdown-menu' role='menu'>
...

But change the directive attribute dropdown to a class, and it seems to work again?

<div class='btn-group dropdown'>
  ...

[brunosmartin]

Upgrading to 0.12 solved it for me, even keeping data-toggle="dropdown"

[kmhigashioka]

@Snede 's answer works for me.

[sime]

Trying to upgrade from 0.10.0 to 0.11 or 0.12 whilst using Angular 1.3.

Haven't been able to get 0.12 to work at all.

Since 0.11.1 the parent element of dropdown-toggle expects a dropdown class/attribute. This is documented, but 0.10.0 worked without it.

[sime]

Ahh I didn't properly read the breaking changes in the CHANGELOG for dropdowns in 0.12.x. only dropdown and dropdown-toggle attributes are accepted.

[icfantv]

@theoziran, please do not only add +1 to issues. It does not add anything to the discussion and only clutters up the thread. Thanks.

[FlandersBurger]

Although it solves the problem of not having to double-click, now the dropdown doesn't close when i select an element.

[utkapodsousom]

Confirmed! Adding 'data-disabled="true"' makes menu open on the first click, but in doesn't close

[vishwapratap]

@chrisirhc thanks it works for me.