From b55fa5579b409be76f551cbb3c1e46e1ad71bdfd Mon Sep 17 00:00:00 2001
From: XhmikosR <xhmikosr@gmail.com>
Date: Fri, 14 Jul 2017 17:49:30 +0300
Subject: [PATCH 1/4] tabs: make the `active` selector more restrictive again.

When one uses say a carousel inside a tab, the `.active` selector previously matches the carousel ones too leading to broken tabs.

It's not the perfect solution but should the job for now.
---
 js/src/tab.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/src/tab.js b/js/src/tab.js
index 1613bbb7de..4fd69c5071 100644
--- a/js/src/tab.js
+++ b/js/src/tab.js
@@ -44,7 +44,7 @@ const Tab = (($) => {
   const Selector = {
     DROPDOWN              : '.dropdown',
     NAV_LIST_GROUP        : '.nav, .list-group',
-    ACTIVE                : '.active',
+    ACTIVE                : '> .nav-item > .active, > .active',
     DATA_TOGGLE           : '[data-toggle="tab"], [data-toggle="pill"], [data-toggle="list"]',
     DROPDOWN_TOGGLE       : '.dropdown-toggle',
     DROPDOWN_ACTIVE_CHILD : '> .dropdown-menu .active'

From 640c13062ce80b0b94aef9444050d4d3820fb2d8 Mon Sep 17 00:00:00 2001
From: Johann-S <johann.servoire@gmail.com>
Date: Sun, 16 Jul 2017 16:04:37 +0200
Subject: [PATCH 2/4] When we show our tabs element use children to be more
 restrictive

---
 js/src/tab.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/js/src/tab.js b/js/src/tab.js
index 4fd69c5071..5e5a83118d 100644
--- a/js/src/tab.js
+++ b/js/src/tab.js
@@ -44,7 +44,7 @@ const Tab = (($) => {
   const Selector = {
     DROPDOWN              : '.dropdown',
     NAV_LIST_GROUP        : '.nav, .list-group',
-    ACTIVE                : '> .nav-item > .active, > .active',
+    ACTIVE                : '.active',
     DATA_TOGGLE           : '[data-toggle="tab"], [data-toggle="pill"], [data-toggle="list"]',
     DROPDOWN_TOGGLE       : '.dropdown-toggle',
     DROPDOWN_ACTIVE_CHILD : '> .dropdown-menu .active'
@@ -148,7 +148,8 @@ const Tab = (($) => {
     // private
 
     _activate(element, container, callback) {
-      const active          = $(container).find(Selector.ACTIVE)[0]
+      const activeElements  = callback ? $(container).children(Selector.ACTIVE) : $(container).find(Selector.ACTIVE)
+      const active          = activeElements[0]
       const isTransitioning = callback
         && Util.supportsTransitionEnd()
         && (active && $(active).hasClass(ClassName.FADE))

From edf90c1bc4ec7c081cdb891a7c10dfaf6b1832e7 Mon Sep 17 00:00:00 2001
From: Johann-S <johann.servoire@gmail.com>
Date: Mon, 17 Jul 2017 10:05:45 +0200
Subject: [PATCH 3/4] Add unit test for nested tabs

---
 js/tests/unit/tab.js | 38 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/js/tests/unit/tab.js b/js/tests/unit/tab.js
index 1e2b66c048..3a7c1bb785 100644
--- a/js/tests/unit/tab.js
+++ b/js/tests/unit/tab.js
@@ -343,4 +343,42 @@ $(function () {
     assert.notOk($tabs.find('li:last > a').hasClass('active'))
     assert.notOk($tabs.find('li:last > .dropdown-menu > a:first').hasClass('active'))
   })
+
+  QUnit.test('Nested tabs', function (assert) {
+    assert.expect(2)
+    var done = assert.async()
+    var tabsHTML =
+          '<nav class="nav nav-tabs" role="tablist">'
+        + '  <a id="tab1" href="#x-tab1" class="nav-item nav-link" data-toggle="tab" role="tab" aria-controls="x-tab1">Tab 1</a>'
+        + '  <a href="#x-tab2" class="nav-item nav-link active" data-toggle="tab" role="tab" aria-controls="x-tab2" aria-expanded="true">Tab 2</a>'
+        + '  <a href="#x-tab3" class="nav-item nav-link" data-toggle="tab" role="tab" aria-controls="x-tab3">Tab 3</a>'
+        + '</nav>'
+        + '<div class="tab-content">'
+        + '  <div class="tab-pane" id="x-tab1" role="tabpanel">'
+        + '    <nav class="nav nav-tabs" role="tablist">'
+        + '      <a href="#nested-tab1" class="nav-item nav-link active" data-toggle="tab" role="tab" aria-controls="x-tab1" aria-expanded="true">Nested Tab 1</a>'
+        + '      <a id="tabNested2" href="#nested-tab2" class="nav-item nav-link" data-toggle="tab" role="tab" aria-controls="x-profile">Nested Tab2</a>'
+        + '    </nav>'
+        + '    <div class="tab-content">'
+        + '      <div class="tab-pane active" id="nested-tab1" role="tabpanel">Nested Tab1 Content</div>'
+        + '      <div class="tab-pane" id="nested-tab2" role="tabpanel">Nested Tab2 Content</div>'
+        + '    </div>'
+        + '  </div>'
+        + '  <div class="tab-pane active" id="x-tab2" role="tabpanel">Tab2 Content</div>'
+        + '  <div class="tab-pane" id="x-tab3" role="tabpanel">Tab3 Content</div>'
+        + '</div>'
+
+    $(tabsHTML).appendTo('#qunit-fixture')
+
+    $('#tabNested2').on('shown.bs.tab', function () {
+      assert.ok($('#x-tab1').hasClass('active'))
+      done()
+    })
+
+    $('#tab1').on('shown.bs.tab', function () {
+      assert.ok($('#x-tab1').hasClass('active'))
+      $('#tabNested2').trigger($.Event('click'))
+    })
+    .trigger($.Event('click'))
+  })
 })

From 2eb1e687bd74d147145000b3971821cc890d7652 Mon Sep 17 00:00:00 2001
From: Johann-S <johann.servoire@gmail.com>
Date: Tue, 18 Jul 2017 14:22:39 +0200
Subject: [PATCH 4/4] Improve previous selector for nested tabs

---
 js/src/tab.js        | 12 ++++++++++--
 js/tests/unit/tab.js | 15 ++++++++-------
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/js/src/tab.js b/js/src/tab.js
index 5e5a83118d..4c30914951 100644
--- a/js/src/tab.js
+++ b/js/src/tab.js
@@ -45,6 +45,7 @@ const Tab = (($) => {
     DROPDOWN              : '.dropdown',
     NAV_LIST_GROUP        : '.nav, .list-group',
     ACTIVE                : '.active',
+    ACTIVE_UL             : '> li > .active',
     DATA_TOGGLE           : '[data-toggle="tab"], [data-toggle="pill"], [data-toggle="list"]',
     DROPDOWN_TOGGLE       : '.dropdown-toggle',
     DROPDOWN_ACTIVE_CHILD : '> .dropdown-menu .active'
@@ -87,7 +88,8 @@ const Tab = (($) => {
       const selector    = Util.getSelectorFromElement(this._element)
 
       if (listElement) {
-        previous = $.makeArray($(listElement).find(Selector.ACTIVE))
+        const itemSelector = listElement.nodeName === 'UL' ? Selector.ACTIVE_UL : Selector.ACTIVE
+        previous = $.makeArray($(listElement).find(itemSelector))
         previous = previous[previous.length - 1]
       }
 
@@ -148,7 +150,13 @@ const Tab = (($) => {
     // private
 
     _activate(element, container, callback) {
-      const activeElements  = callback ? $(container).children(Selector.ACTIVE) : $(container).find(Selector.ACTIVE)
+      let activeElements
+      if (container.nodeName === 'UL') {
+        activeElements = $(container).find(Selector.ACTIVE_UL)
+      } else {
+        activeElements = $(container).children(Selector.ACTIVE)
+      }
+
       const active          = activeElements[0]
       const isTransitioning = callback
         && Util.supportsTransitionEnd()
diff --git a/js/tests/unit/tab.js b/js/tests/unit/tab.js
index 3a7c1bb785..6f52e4042f 100644
--- a/js/tests/unit/tab.js
+++ b/js/tests/unit/tab.js
@@ -182,13 +182,14 @@ $(function () {
     assert.expect(2)
     var done = assert.async()
 
-    var dropHTML = '<ul class="drop nav">'
-        + '<li class="dropdown"><a data-toggle="dropdown" href="#">1</a>'
-        + '<ul class="dropdown-menu">'
-        + '<li><a href="#1-1" data-toggle="tab">1-1</a></li>'
-        + '<li><a href="#1-2" data-toggle="tab">1-2</a></li>'
-        + '</ul>'
-        + '</li>'
+    var dropHTML =
+          '<ul class="drop nav">'
+        + '  <li class="dropdown"><a data-toggle="dropdown" href="#">1</a>'
+        + '    <ul class="dropdown-menu nav">'
+        + '      <li><a href="#1-1" data-toggle="tab">1-1</a></li>'
+        + '      <li><a href="#1-2" data-toggle="tab">1-2</a></li>'
+        + '    </ul>'
+        + '  </li>'
         + '</ul>'
 
     $(dropHTML)