Improve previous selector for nested tabs

diff --git a/js/src/tab.js b/js/src/tab.js
index 5e5a83118da248bfb7e77fc242bb799987b2f3c0..4c3091495112084f95e09a424b9f045793767b7c 100644 (file)
--- 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 3a7c1bb7855065d9d0a5f8af18f41bad02488f91..6f52e4042f5ca369c1e5375f8c3b6bd16bf2527f 100644 (file)
--- 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)