Dropdown directives conflict with bootstrap's JS

[lijuenc]

The dropdown directives have a restrict value of CA. This means that if you also have bootstrap.js referenced as a script file, the directives conflict with Bootstrap's JavaScript hooks into the dropdown and dropdown-toggle classes.

See this plunker. Notice that it takes two clicks to open a non-directive dropdown.

http://plnkr.co/edit/AYHYLesd4025dUdfLT7i?p=preview

[chrisirhc]

@Durz , right now there isn't any compatibility with the Bootstrap's Javascript so including Boostrap's JS could have undesirable consequences.
Is there a feature you would like that's provided in the Bootstrap's JS that you can't achieve with UI Bootstrap?

[paulpflug]

I just ran into the same problem. I think it is sufficient to mention it in the docs.
"don't use data-toggle="dropdown" on your link / button. It will conflict with bootstrap.js"

and thanks to pointing me to the solution @Durz ;)

scenario:
someone is not fully aware of the bootstrap UI dropdown feature (because he uses bootstrap UI mainly for some other great feature) and tries to use plain bootstrap, but it is just not working the way they say ;)

[paulpflug]

On a second thought, maybe we should prefer to prevent the conflict by overwriting the data-toggle attribute.

[lijuenc]

@chrisirhc Thanks for that bit of info. I don't have a particular feature that I'm missing. I was updating UI-Bootstrap from 0.10.0 to 0.11.0 for an existing project that has had code written before UI-Bootstrap was brought in (hence the use of bootstrap.js), and found my dropdowns requiring several clicks to open. It wasn't immediately obvious that UI-Bootstrap was conflicting with Bootstrap's JS as I don't think the docs mention that you shouldn't use the two together.

[pkozlowski-opensource]

@bekos @chrisirhc I wonder if we shouldn't drop C from those directives. It is true that it will require more typing but at least will be explicit....

[bekos]

Agree to drop the C from our directives. This will be inevitable anyway when we namespace our directives I think.

[pkozlowski-opensource]

OK, let's drop C then!

[inquire]

Hi guys! You talked about removing the C, but as i am looking at the latest master, the C is still in there. Did you guys change your mind, or is there another clever way of making it work alongside bootstrap.js?

[sensorii]

I spent hours discovering this issue myself, finally finding an explanation here so making a note. It would be nice if bootstrap.js and angular-bootstrap.js were compatible. I tried the latest version here and was not able to see resolution of the issue.

[PowerKiKi]

As @inquire mentioned, I think the situation is not clear yet. @bekos create a commit on his fork, but it is not yet available anywhere in this repository. Also that commit probably miss a Breaking Change note somewhere in the Changelog.

@Durz, could you please re-open this issue, until the commit actually get merged ?

(the MIFOSX-1387 "merged" mentioned on this page actually refers to an entirely different project)

[PowerKiKi]

Also I don't see how @bekos commit avoid the conflict. According to the commit message, this is the new syntax that should be used:

Before:

  <button class="dropdown-toggle" ...>

After:

  <button class="dropdown-toggle" dropdown-toggle ...>

But as you can see the CSS class are not modified at all. So wouldn't the original Bootstrap JavaScript still behave exactly as originally described by @inquire and enter in conflict with ui-boostrap directives ?

[lijuenc]

reopened as requested. From what I can see in the commit diff, the restrict property of the directive was removed completely, rather than being changed from restrict: 'CA' to restrict: 'A'. Was this intended?

[chrisirhc]

@Durz I believe the default value for restrict is 'A'. However, this changed recently in 1.3, but we haven't gotten around to 1.3 support yet.

With regards to @PowerKiKi 's comment, now dropdown classes aren't linked as directives via ui-bootstrap. As mentioned in the http://getbootstrap.com/javascript/#dropdowns, the data-toggle="dropdown attribute is required, hence, if you use the following line to setup your dropdowns, that should fix compatibility issues (use it instead of targeting the class):

$('[data-toggle=dropdown]').dropdown()

[PowerKiKi]

Thank you for those explanations. Not being familiar with original Bootstrap JavaScript I was under the impression that initialization was automated and we could not have any control on that. Your suggestion totally makes sense, thanks.

[devniel]

Thanks @chrisirhc , it works

[michaeldjeffrey]

Is there anywhere where the breaking changes are documented between version? This one just tripped me up, and wondering if there are any more I don't know about.

[karianna]

@michaeldjeffrey Not that I'm aware of - you can look at all of the issues with a angular1.3 label to get a rough idea.

[iKronyck]

thanks @chrisirhc it worked for me in laravel and react js