From 2cbb0a941c0a33fc11518061cfd6fad5c0d1c3c0 Mon Sep 17 00:00:00 2001
From: Carson Sievert <cpsievert1@gmail.com>
Date: Wed, 21 Apr 2021 00:30:19 -0500
Subject: [PATCH] Dropdown: support `.dropdown-item` wrapped in `<li>` tags
 (#33634)

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
---
 js/src/tab.js             |  7 ++++++-
 js/tests/unit/tab.spec.js | 22 ++++++++++++++++++++++
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/js/src/tab.js b/js/src/tab.js
index 4d823cc61c74..7301779d650d 100644
--- a/js/src/tab.js
+++ b/js/src/tab.js
@@ -161,7 +161,12 @@ class Tab extends BaseComponent {
       element.classList.add(CLASS_NAME_SHOW)
     }
 
-    if (element.parentNode && element.parentNode.classList.contains(CLASS_NAME_DROPDOWN_MENU)) {
+    let parent = element.parentNode
+    if (parent && parent.nodeName === 'LI') {
+      parent = parent.parentNode
+    }
+
+    if (parent && parent.classList.contains(CLASS_NAME_DROPDOWN_MENU)) {
       const dropdownElement = element.closest(SELECTOR_DROPDOWN)
 
       if (dropdownElement) {
diff --git a/js/tests/unit/tab.spec.js b/js/tests/unit/tab.spec.js
index 4741b495de83..c8e1475adbcf 100644
--- a/js/tests/unit/tab.spec.js
+++ b/js/tests/unit/tab.spec.js
@@ -515,6 +515,28 @@ describe('Tab', () => {
       expect(fixtureEl.querySelector('#nav2 .dropdown-item').classList.contains('active')).toEqual(false)
     })
 
+    it('should support li > .dropdown-item', () => {
+      fixtureEl.innerHTML = [
+        '<ul class="nav nav-tabs">',
+        '  <li class="nav-item"><a class="nav-link active" href="#home" data-bs-toggle="tab">Home</a></li>',
+        '  <li class="nav-item"><a class="nav-link" href="#profile" data-bs-toggle="tab">Profile</a></li>',
+        '  <li class="nav-item dropdown">',
+        '    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Dropdown</a>',
+        '    <ul class="dropdown-menu">',
+        '      <li><a class="dropdown-item" href="#dropdown1" id="dropdown1-tab" data-bs-toggle="tab">@fat</a></li>',
+        '      <li><a class="dropdown-item" href="#dropdown2" id="dropdown2-tab" data-bs-toggle="tab">@mdo</a></li>',
+        '    </ul>',
+        '  </li>',
+        '</ul>'
+      ].join('')
+
+      const firstDropItem = fixtureEl.querySelector('.dropdown-item')
+
+      firstDropItem.click()
+      expect(firstDropItem.classList.contains('active')).toEqual(true)
+      expect(fixtureEl.querySelector('.nav-link').classList.contains('active')).toEqual(false)
+    })
+
     it('should handle nested tabs', done => {
       fixtureEl.innerHTML = [
         '<nav class="nav nav-tabs" role="tablist">',