Deleting a tab from the tab header causes a refresh

[4578395263256]

Here is a plunker: http://plnkr.co/edit/2AWe1dKhxfw0SvqX6RjE?p=preview

If you click on the "Delete" button in the header, the page refreshes. But if you do it in the body, the page does not refresh. This behavior is inconsistent, and it shouldn't be. (A workaround is using instead of but this still seems like an issue)

[vandermore]

This issue and issue #3266 are related.

The Plunker listed above is using the 0.12.0 version with templates. In the 0.11.2 version, the template for the tab has an anchor tag, but no href in the tag (works properly).

In the 0.12.0 version, an empty href tag was added to the anchor tag in the template. This version causes the page to reload. Removing the href from the anchor tag in the template restores the expected behavior.

Unfortunately the href was added to enable keyboard accessibility to the tabs.

[vandermore]

Further information: Originally I was using a element to house the ng-click action for the close, I changed it over to using an anchor tag with an ng-click (no href on the anchor tag), and the page does not reload when using the anchor tag.

Is it possible that the click event on the button tag is being passed through to the tab's anchor tag?

[wesleycho]

This appears to be fixed in master, as can be seen here.

[mikyladewitt]

It looks like this was broken again in 0.13.3. If you update the original plunker with angular-bootstrap version 0.13.3+, the problem still exists.

[wesleycho]

Looks like you're correct that it has regressed, as can be seen here.

[icfantv]

Something really screwy is going on here. I took the bad plunker and reverted any tab code change back to April and the problem still persists with both Angular 1.4.4 and 1.4.5. I took the good plunker and added the latest version of the tab code and the problem still is not present.

[wesleycho]

Just adding that one can work around this regression currently by calling event.preventDefault() in the callback - here is an example.

It may be worth investigating what is happening in Angular with the a directive at the source here - it may be a UI Bootstrap bug, but it's worth looking to see what is going on.

[icfantv]

I neglected to update this with my findings. Even with the empty href tag, the ng-click handler within Angular is not getting fired before the browser acts. As @wesleycho noted above, while annoying, this can be mitigated by executing the preventDefault() in the event handler.

[wesleycho]

What is happening is that the anchor tag does not receive the click event - this is likely due to how the browser works in this particular type of situation.

I am closing this issue as one we are not going to support as one is going to have issues when nesting an anchor element with a button element.

[icfantv]

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