uib-dropdown - ontoggle event not fired with multiple dropdowns on one page

[cleon26]

When I have two dropdowns on the same page, both of which are using the on-toggle event, only one of them is called when i use the other dropdown to close the first.

In this plunker, open up your console and try this:

1, click dropdown1 to open it. you'll see an event logged "dropdown1 open"

2. click dropdown1 to close it. you'll see an event logged "dropdown1 closed" 3, click dropdown2 to open it. you'll see an event logged "dropdown2 open"
3. click dropdown2 to close it. you'll see an event logged "dropdown2 closed" 5, now click dropdown1 to open it. you'll see an event logged "dropdown1 open"
4. click dropdown2 while dropdown1 is still open. dropdown2 will open and dropdown1 will close but notice that the events only show the dropdown1 messages. Since I'm doing other things in my on-toggle event, this is causing me a problem (and my users actually have to triple click the dropdown to get it to open)

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

[wesleycho]

The problem manifests if at least two dropdowns are in the same container - in this case, both are using append-to-body, so they have the same parent element.

This would require us to use a multimap to fix this, as we would need to verify that there are no elements in the particular container before trying to remove the class.

[ghost]

@cleon26 did you devise a workaround for this issue? I'm experiencing the same problem

[cleon26]

Sadly no.

[ghost]

@cleon26 I just ended up using ng-click on the same element

[levenleven]

As a workaround, you can bind is-open to property with getter and setter and perform required action in setter instead of on-toggle

[codyjs]

Thanks for the workaround @levenleven, that works perfectly!