ui-bootstrap-tpls + Accordion + FireFox + stopPropagation causes FireFox to reload page

[alindberg]

I have a radio button in an accordion header to change how the data is presented. I have added an ngClick function($event, group) that runs $event.stopPropagation to prevent the accordion from closing and to allow the radio update the $scope variable. This works as expected in Chrome, IE11, but causes FireFox to reload the page and start over, losing all the created data.

Please see plinker: http://plnkr.co/edit/10mS8azqb2OkueNdGuus

If you watch the FireFox console.log you will see a reboot when the radio in the 2nd accordion header is selected.

Thanks

[icfantv]

I wonder if this is related to the issue we have with tabs doing the same behavior due to the anchor tag. IIRC, this issue is that the click event is never received by angular because it's intercepted by the browser first.

[alindberg]

Is there a work-around?

[icfantv]

@alindberg, yes, the more heavy-handed approach would be to override the accordion template and instead of using <a> you can use Bootstrap's btn-link class, documented here (on, say, a <span> which achieves the same visual effect as a link. I don't, however, know if this changes other visual behavior as I've not tried it. Depending on your situation, you may not even want/need the <a>.

You can override the accordion template via the template-url option as seen here.

[RobJacobs]

@alindberg Looks like the plunk you have posted above is using the ui-bootstrap version 0.12.1?

[alindberg]

I believe so, however the version I am using is 0.13.4. I just updated the plunk to 0.13.4 with the same results.

[alindberg]

ARG! when trying to clean up the old versions, I wound up delete the plunk. I will rebuild it.

Tomorrow - I have yet to figure out how to add the current libraries (angularjs 1.4.5, etc.).

[alindberg]

Fixed - the new plunker - http://plnkr.co/edit/NR6y4oW6UiegXUI8BL62

[RobJacobs]

I think the heart of the problem here is that the accordion heading template wraps the heading content in an 'a'nchor element. When you start adding buttons and button like elements inside of an anchor element, you get unexpected results.

[wesleycho]

I'm starting to think we should not officially support these use cases - this appears to be ultimately a strange case due to how Firefox operates when dealing with certain elements nested in certain other ones.

The $event.stopPropagation hack is the best fix I can imagine for this.

[RobJacobs]

Here is a simplified plunk that demonstrates the problem. It's not isolated to Firefox, Chrome exhibits the same behavior. Clicking on the actual radio button does not cause the issue, it's when the stopPropagation() on the surrounding element is hit.

[alindberg]

It does seem to be the stopPropagation().

[guzmanpaniagua]

$event.stopPropagation(); is for stoping the event to reach outside elements, so you have to use it in the inner elements not in a wraper element, so use it in individual links or in the radios if you dont want both events to fire

with jquery you can use delegate to surround the problem or just use the old js trick and replace with return false; it may work

[wesleycho]

Funnily enough, I encountered this bug at work - we could switch the template to use div elements instead of anchor tags and mention that if one wants the pointer cursor to use CSS. This will hurt accessibility some, but it will fix this bug.

[icfantv]

@wesleycho, what do the about using Bootstrap's btn-link class? I admit I don't know what affect this would have on accessibility/ARIA.

[wesleycho]

Already took a look at that before - it messes with the styling in undesirable ways...I think a div would be a lower overhead.

[acwatson]

I am having the same problem when using radio buttons within angular ui tabs. I added a ng-click=$event.stopPropagation to my radio button to get the radio button to show as checked when clicked upon. The solution worked in Chrome and Safari but not Firefox. In Firefox, clicking on the radio button refreshed the page. Would love to see this issue get fixed.

[icfantv]

@acwatson, we are in a massive push to get 1.0 out the door. There is enough information above if you want to take a stab at a PR.

[wesleycho]

I forgot to link the commit, this is now fixed via df211bd

[icfantv]

Linking issues, #5361, #4777, #4104, and #3199. For the relevant conversation in Bootstrap, see this thread.