Merge pull request #20467 from maxbeatty/v4-dev-17754

add support for ol in tab plugin

2 files changed, 21 insertions, 5 deletions

diff --git a/js/src/tab.js b/js/src/tab.js
index 4424a7a41..c625a010d 100644
--- a/js/src/tab.js
+++ b/js/src/tab.js
@@ -44,7 +44,7 @@ const Tab = (($) => {
     A                     : 'a',
     LI                    : 'li',
     DROPDOWN              : '.dropdown',
-    UL                    : 'ul:not(.dropdown-menu)',
+    LIST                  : 'ul:not(.dropdown-menu), ol:not(.dropdown-menu)',
     FADE_CHILD            : '> .nav-item .fade, > .fade',
     ACTIVE                : '.active',
     ACTIVE_CHILD          : '> .nav-item > .active, > .active',
@@ -85,11 +85,11 @@ const Tab = (($) => {
 
       let target
       let previous
-      let ulElement = $(this._element).closest(Selector.UL)[0]
+      let listElement = $(this._element).closest(Selector.LIST)[0]
       let selector  = Util.getSelectorFromElement(this._element)
 
-      if (ulElement) {
-        previous = $.makeArray($(ulElement).find(Selector.ACTIVE))
+      if (listElement) {
+        previous = $.makeArray($(listElement).find(Selector.ACTIVE))
         previous = previous[previous.length - 1]
       }
 
@@ -118,7 +118,7 @@ const Tab = (($) => {
 
       this._activate(
         this._element,
-        ulElement
+        listElement
       )
 
       let complete = () => {
diff --git a/js/tests/unit/tab.js b/js/tests/unit/tab.js
index 2e0143293..522ed0b3e 100644
--- a/js/tests/unit/tab.js
+++ b/js/tests/unit/tab.js
@@ -76,6 +76,22 @@ $(function () {
     assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'home')
   })
 
+  QUnit.test('should activate element by tab id in ordered list', function (assert) {
+    assert.expect(2)
+    var pillsHTML = '<ol class="pills">'
+        + '<li><a href="#home">Home</a></li>'
+        + '<li><a href="#profile">Profile</a></li>'
+        + '</ol>'
+
+    $('<ol><li id="home"/><li id="profile"/></ol>').appendTo('#qunit-fixture')
+
+    $(pillsHTML).find('li:last a').bootstrapTab('show')
+    assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'profile')
+
+    $(pillsHTML).find('li:first a').bootstrapTab('show')
+    assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'home')
+  })
+
   QUnit.test('should not fire shown when show is prevented', function (assert) {
     assert.expect(1)
     var done = assert.async()