From 5f0a4f2409d3e5a29c4f4ec120023fe8a1e9bc3e Mon Sep 17 00:00:00 2001
From: Wesley Cho <wesley.cho@gmail.com>
Date: Thu, 14 Jan 2016 20:31:38 -0800
Subject: [PATCH] fix(tab): revert template change

- Reverts template change to tab
- Adds warning if one desires more complex HTML inside the tab

BREAKING CHANGE: This undoes the prior change to the template using div
elements. If one wishes to use div elements, one must override the
template in one's app and provide the necessary CSS

Closes #5262
Fixes #5254
---
 src/tabs/docs/readme.md    |  6 ++++-
 src/tabs/tabs.css          | 48 --------------------------------------
 src/tabs/test/tabs.spec.js | 36 ++++++++++++++--------------
 template/tabs/tab.html     |  2 +-
 4 files changed, 24 insertions(+), 68 deletions(-)
 delete mode 100644 src/tabs/tabs.css

diff --git a/src/tabs/docs/readme.md b/src/tabs/docs/readme.md
index aa1319ce73..d8644506e3 100644
--- a/src/tabs/docs/readme.md
+++ b/src/tabs/docs/readme.md
@@ -23,7 +23,7 @@ AngularJS version of the tabs directive.
   <i class="glyphicon glyphicon-eye-open"></i>
   _(Default: `false`)_ -
   Whether tab is currently selected.
-  
+
 * `deselect()`
   <small class="badge">$</small>
   _(Default: `null`)_ -
@@ -46,3 +46,7 @@ AngularJS version of the tabs directive.
 ### Tabset heading
 
 Instead of the `heading` attribute on the `uib-tabset`, you can use an `uib-tab-heading` element inside a tabset that will be used as the tabset's header. There you can use HTML as well.
+
+### Known issues
+
+To use clickable elements within the tab, you have override the tab template to use div elements instead of anchor elements, and replicate the desired styles from Bootstrap's CSS. This is due to browsers interpreting anchor elements as the target of any click event, which triggers routing when certain elements such as buttons are nested inside the anchor element.
diff --git a/src/tabs/tabs.css b/src/tabs/tabs.css
deleted file mode 100644
index 95840d02a1..0000000000
--- a/src/tabs/tabs.css
+++ /dev/null
@@ -1,48 +0,0 @@
-.uib-tab > div {
-  position: relative;
-  display: block;
-  padding: 10px 15px;
-  outline: 0;
-  color: #337ab7;
-}
-.uib-tab > div:focus,
-.uib-tab > div:hover {
-  color: #23527c;
-  cursor: pointer;
-  background-color: #eee;
-}
-.uib-tab.disabled > div {
-  color: #777;
-}
-.uib-tab.disabled > div:focus,
-.uib-tab.disabled > div:hover {
-  color: #777;
-  cursor: not-allowed;
-  background-color: transparent;
-}
-.nav-tabs > .uib-tab > div {
-  margin-right: 2px;
-  line-height: 1.42857143;
-  border: 1px solid transparent;
-  border-radius: 4px 4px 0 0;
-}
-.nav-tabs > .uib-tab > div:hover {
-  border-color: #eee #eee #ddd;
-}
-.nav-tabs > .uib-tab.active > div,
-.nav-tabs > .uib-tab.active > div:focus,
-.nav-tabs > .uib-tab.active > div:hover {
-  color: #555;
-  cursor: default;
-  background-color: #fff;
-  border-color: #ddd #ddd transparent #ddd;
-}
-.nav-pills > .uib-tab > div {
-  border-radius: 4px;
-}
-.nav-pills > .uib-tab.active > div,
-.nav-pills > .uib-tab.active > div:focus,
-.nav-pills > .uib-tab.active > div:hover {
-  color: #fff;
-  background-color: #337ab7;
-}
diff --git a/src/tabs/test/tabs.spec.js b/src/tabs/test/tabs.spec.js
index 3296ae4339..554b938cb1 100644
--- a/src/tabs/test/tabs.spec.js
+++ b/src/tabs/test/tabs.spec.js
@@ -61,10 +61,10 @@ describe('tabs', function() {
     it('should create clickable titles', function() {
       var t = titles();
       expect(t.length).toBe(2);
-      expect(t.find('> div').eq(0).text()).toBe('First Tab 1');
+      expect(t.find('> a').eq(0).text()).toBe('First Tab 1');
       //It should put the uib-tab-heading element into the 'a' title
-      expect(t.find('> div').eq(1).children().is('uib-tab-heading')).toBe(true);
-      expect(t.find('> div').eq(1).children().html()).toBe('<b>Second</b> Tab 2');
+      expect(t.find('> a').eq(1).children().is('uib-tab-heading')).toBe(true);
+      expect(t.find('> a').eq(1).children().html()).toBe('<b>Second</b> Tab 2');
     });
 
     it('should bind tabs content and set first tab active', function() {
@@ -76,7 +76,7 @@ describe('tabs', function() {
     });
 
     it('should change active on click', function() {
-      titles().eq(1).find('> div').click();
+      titles().eq(1).find('> a').click();
       expect(contents().eq(1)).toHaveClass('active');
       expect(titles().eq(0)).not.toHaveClass('active');
       expect(titles().eq(1)).toHaveClass('active');
@@ -85,17 +85,17 @@ describe('tabs', function() {
     });
 
     it('should call select callback on select', function() {
-      titles().eq(1).find('> div').click();
+      titles().eq(1).find('> a').click();
       expect(scope.selectSecond).toHaveBeenCalled();
-      titles().eq(0).find('> div').click();
+      titles().eq(0).find('> a').click();
       expect(scope.selectFirst).toHaveBeenCalled();
     });
 
     it('should call deselect callback on deselect', function() {
-      titles().eq(1).find('> div').click();
-      titles().eq(0).find('> div').click();
+      titles().eq(1).find('> a').click();
+      titles().eq(0).find('> a').click();
       expect(scope.deselectSecond).toHaveBeenCalled();
-      titles().eq(1).find('> div').click();
+      titles().eq(1).find('> a').click();
       expect(scope.deselectFirst).toHaveBeenCalled();
     });
   });
@@ -181,13 +181,13 @@ describe('tabs', function() {
       execOrder = [];
 
       // Select second tab
-      titles().eq(1).find('> div').click();
+      titles().eq(1).find('> a').click();
       expect(execOrder).toEqual([ 'deselect1', 'select2' ]);
 
       execOrder = [];
 
       // Select again first tab
-      titles().eq(0).find('> div').click();
+      titles().eq(0).find('> a').click();
       expect(execOrder).toEqual([ 'deselect2', 'select1' ]);
     });
   });
@@ -277,7 +277,7 @@ describe('tabs', function() {
     });
 
     it('should switch active when clicking', function() {
-      titles().eq(3).find('> div').click();
+      titles().eq(3).find('> a').click();
       expectTabActive(scope.tabs[3]);
     });
 
@@ -344,7 +344,7 @@ describe('tabs', function() {
     }));
 
     function heading() {
-      return elm.find('ul li > div').children();
+      return elm.find('ul li > a').children();
     }
 
     it('should create a heading bound to myHtml', function() {
@@ -406,7 +406,7 @@ describe('tabs', function() {
 
     it('should preserve correct ordering', function() {
       function titles() {
-        return elm.find('ul.nav-tabs li > div');
+        return elm.find('ul.nav-tabs li > a');
       }
       scope.$apply();
       expect(titles().length).toBe(9);
@@ -549,7 +549,7 @@ describe('tabs', function() {
       expectContents(['Hello', 'content 1', 'content 2', 'content 3']);
 
       // Select last tab
-      titles().find('> div').eq(3).click();
+      titles().find('> a').eq(3).click();
       expect(contents().eq(3)).toHaveClass('active');
       expect(titles().eq(3)).toHaveClass('active');
 
@@ -563,7 +563,7 @@ describe('tabs', function() {
       expect(contents().eq(2)).toHaveClass('active');
 
       // Select 2nd tab ("tab 1")
-      titles().find('> div').eq(1).click();
+      titles().find('> a').eq(1).click();
       expect(titles().eq(1)).toHaveClass('active');
       expect(contents().eq(1)).toHaveClass('active');
 
@@ -659,10 +659,10 @@ describe('tabs', function() {
     }
 
     it('should not switch active when clicking on title', function() {
-      titles().eq(2).find('> div').click();
+      titles().eq(2).find('> a').click();
       expectTabActive(scope.tabs[2]);
 
-      titles().eq(3).find('> div').click();
+      titles().eq(3).find('> a').click();
       expectTabActive(scope.tabs[2]);
     });
 
diff --git a/template/tabs/tab.html b/template/tabs/tab.html
index b7b83e5eff..35927bcdd0 100644
--- a/template/tabs/tab.html
+++ b/template/tabs/tab.html
@@ -1,3 +1,3 @@
 <li ng-class="{active: active, disabled: disabled}" class="uib-tab">
-  <div ng-click="select()" uib-tab-heading-transclude>{{heading}}</div>
+  <a href ng-click="select()" uib-tab-heading-transclude>{{heading}}</a>
 </li>