Allow data-toggle="dropdown" and form click events to bubble

js/src/dropdown.js

@@ -244,7 +244,6 @@ class Dropdown extends BaseComponent {
   _addEventListeners() {
     EventHandler.on(this._element, EVENT_CLICK, event => {
       event.preventDefault()
-      event.stopPropagation()
       this.toggle()
     })
   }
@@ -400,11 +399,17 @@ class Dropdown extends BaseComponent {
         continue
       }
 
-      if (event && ((event.type === 'click' &&
-          /input|textarea/i.test(event.target.tagName)) ||
-          (event.type === 'keyup' && event.key === TAB_KEY)) &&
-          dropdownMenu.contains(event.target)) {
-        continue
+      if (event) {
+        if (context._element === event.target) {
+          continue
+        }
+
+        if (((event.type === 'click' &&
+            /input|textarea/i.test(event.target.tagName)) ||
+            (event.type === 'keyup' && event.key === TAB_KEY)) &&
+            dropdownMenu.contains(event.target)) {
+          continue
+        }
       }
 
       const hideEvent = EventHandler.trigger(toggles[i], EVENT_HIDE, relatedTarget)
@@ -516,8 +521,7 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, Dropdown.clearMenus)
 EventHandler.on(document, EVENT_KEYUP_DATA_API, Dropdown.clearMenus)
 EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
   event.preventDefault()
-  event.stopPropagation()
-  Dropdown.dropdownInterface(this, 'toggle')
+  Dropdown.dropdownInterface(this)
 })
 EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_FORM_CHILD, e => e.stopPropagation())
 

js/tests/unit/dropdown.spec.js

@@ -54,6 +54,36 @@ describe('Dropdown', () => {
       expect(dropdown.toggle).toHaveBeenCalled()
     })
 
+    it('should allow click events to bubble', () => {
+      fixtureEl.innerHTML = [
+        '<div class="dropdown">',
+        '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
+        '  <div class="dropdown-menu">',
+        '    <a class="dropdown-item" href="#">Secondary link</a>',
+        '  </div>',
+        '</div>'
+      ].join('')
+
+      const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
+      const clickListener = jasmine.createSpy('clickListener')
+      const delegatedClickListener = jasmine.createSpy('delegatedClickListener')
+
+      btnDropdown.addEventListener('click', () => clickListener())
+
+      document.addEventListener('click', event => {
+        if (!event.target.matches('[data-bs-toggle="dropdown"]')) {
+          return
+        }
+
+        delegatedClickListener()
+      }, false)
+
+      btnDropdown.click()
+
+      expect(clickListener).toHaveBeenCalled()
+      expect(delegatedClickListener).toHaveBeenCalled()
+    })
+
     it('should create offset modifier correctly when offset option is a function', done => {
       fixtureEl.innerHTML = [
         '<div class="dropdown">',