Accordion heading checkbox causes page reload in Firefox

[ghost]

Hey I am having an issue where the usual $event.stopPropagation(); does not work inside the uib-accordion-heading on an input checkbox.
Here is a plunker using the default accordion demo. All I did was add an ng-click to the checkbox in the last accordion.

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

Thanks,

[wesleycho]

The event triggering will be on the anchor tag of the accordion-heading - see the first paragraph of Known Issues for the accordion documentation: https://angular-ui.github.io/bootstrap/#/accordion

The workaround is to create a custom template to use a div instead of an a for the heading.

[icfantv]

@jssayin, please extend us the courtesy of searching both open and closed issues before posting one. These instructions may also be found in our project documentation.

That said, you will need to override the template for accordions as the use of the anchor tag is the culprit here. We went round and round with discussions and had committed a solution that used <div> elements instead but this wound up breaking Bootstrap's CSS since it's too tightly coupled to structure (i.e., using > instead of for descendent selectors). As such, we reverted that change and went back to anchor tags.

[icfantv]

Please note that if you switch to <div> elements, you will also need to modify Bootstrap's CSS so that you still the the correct UX.

[ghost]

That works, thanks for your help. My bad that all my searching for "checkbox in uib bootstrap accordion causes page reload" and things like it did not direct me to the known issue.

Thanks!

[icfantv]

Yea, no worries. It's not limited to checkboxes (or accordion for that matter as tabs suffer the same problem). It's any widget, really.

Also, for issue linkage, you can see issues #4777, #4533, #4104, and #3199. For the relevant conversation in Bootstrap, see this thread.

[jasminemozai]

Hi,

My workaround for this:
Add href="javascript:void(0);" in ui-bootstrap-tpls.js:

Regards,