Fix event propagation from inactive and disabled dropdowns (#30510) (#30511)

2 files changed, 67 insertions, 3 deletions

diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index 12ca85756..c0f1f6ffe 100644
--- a/js/src/dropdown.js
+++ b/js/src/dropdown.js
@@ -452,9 +452,6 @@ class Dropdown {
       return
     }
 
-    event.preventDefault()
-    event.stopPropagation()
-
     if (this.disabled || $(this).hasClass(CLASS_NAME_DISABLED)) {
       return
     }
@@ -466,6 +463,9 @@ class Dropdown {
       return
     }
 
+    event.preventDefault()
+    event.stopPropagation()
+
     if (!isActive || isActive && (event.which === ESCAPE_KEYCODE || event.which === SPACE_KEYCODE)) {
       if (event.which === ESCAPE_KEYCODE) {
         const toggle = parent.querySelector(SELECTOR_DATA_TOGGLE)
diff --git a/js/tests/unit/dropdown.js b/js/tests/unit/dropdown.js
index 7bc1abca2..12fa93a0e 100644
--- a/js/tests/unit/dropdown.js
+++ b/js/tests/unit/dropdown.js
@@ -1020,6 +1020,70 @@ $(function () {
     $textarea.trigger('click')
   })
 
+  QUnit.test('should not stop key event propagation when dropdown is disabled', function (assert) {
+    assert.expect(1)
+    var done = assert.async()
+
+    var dropdownHTML = '<div class="tabs">' +
+        '<div class="dropdown">' +
+        '<a href="#" class="dropdown-toggle" id="toggle" data-toggle="dropdown" disabled>Dropdown</a>' +
+        '<div class="dropdown-menu">' +
+        '<a class="dropdown-item" id="item" href="#">Menu item</a>' +
+        '</div>' +
+        '</div>'
+
+    var $dropdown = $(dropdownHTML)
+      .appendTo('#qunit-fixture')
+      .find('[data-toggle="dropdown"]')
+      .bootstrapDropdown()
+
+    var $body = $('body')
+
+    $(document).on('keydown', function () {
+      $body.addClass('event-handled')
+    })
+
+    // Key escape
+    $dropdown.trigger('focus').trigger($.Event('keydown', {
+      which: 27
+    }))
+
+    assert.ok($body.hasClass('event-handled'), 'ESC key event was propagated')
+    done()
+  })
+
+  QUnit.test('should not stop ESC key event propagation when dropdown is not active', function (assert) {
+    assert.expect(1)
+    var done = assert.async()
+
+    var dropdownHTML = '<div class="tabs">' +
+        '<div class="dropdown">' +
+        '<a href="#" class="dropdown-toggle" id="toggle" data-toggle="dropdown">Dropdown</a>' +
+        '<div class="dropdown-menu">' +
+        '<a class="dropdown-item" id="item" href="#">Menu item</a>' +
+        '</div>' +
+        '</div>'
+
+    var $dropdown = $(dropdownHTML)
+      .appendTo('#qunit-fixture')
+      .find('[data-toggle="dropdown"]')
+      .bootstrapDropdown()
+
+    var $body = $('body')
+
+    $(document).on('keydown', function () {
+      $body.addClass('event-handled')
+    })
+
+    // Key escape
+    $dropdown.trigger('focus').trigger($.Event('keydown', {
+      which: 27
+    }))
+
+    assert.ok($body.hasClass('event-handled'), 'ESC key event was propagated')
+    done()
+  })
+
   QUnit.test('should not use Popper.js if display set to static', function (assert) {
     assert.expect(1)
     var dropdownHTML =