Don't open dropdown on ESC on trigger element (#28912)

* Don't open dropdown on ESC on trigger element

Closes #28751

diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index d336a46d9176fb33e4b660836f8291a9faab75c9..1121a9819e844b90b4e96c0f8cbe0ae5a51907f1 100644 (file)
--- a/js/src/dropdown.js
+++ b/js/src/dropdown.js
@@ -475,6 +475,10 @@ class Dropdown {
     const parent   = Dropdown._getParentFromElement(this)
     const isActive = $(parent).hasClass(ClassName.SHOW)
 
+    if (!isActive && event.which === ESCAPE_KEYCODE) {
+      return
+    }
+
     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 1ecfd1f8bf8f35806ed16060e0b9486c45dfcc00..652ec480e9770df4bbeffe88ca216e9be6270e3f 100644 (file)
--- a/js/tests/unit/dropdown.js
+++ b/js/tests/unit/dropdown.js
@@ -67,6 +67,31 @@ $(function () {
     $dropdown.trigger($.Event('click'))
   })
 
+  QUnit.test('should not open dropdown if escape key was pressed on the toggle', function (assert) {
+    assert.expect(1)
+    var done = assert.async()
+    var dropdownHTML = '<div class="tabs">' +
+        '<div class="dropdown">' +
+        '<button disabled href="#" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>' +
+        '<div class="dropdown-menu">' +
+        '<a class="dropdown-item" href="#">Secondary link</a>' +
+        '<a class="dropdown-item" href="#">Something else here</a>' +
+        '<div class="divider"/>' +
+        '<a class="dropdown-item" href="#">Another link</a>' +
+        '</div>' +
+        '</div>' +
+        '</div>'
+    $(dropdownHTML).appendTo('#qunit-fixture')
+    var $dropdown = $('#qunit-fixture').find('[data-toggle="dropdown"]').bootstrapDropdown()
+    var $button = $('button[data-toggle="dropdown"]')
+    // Key escape
+    $button.trigger('focus').trigger($.Event('keydown', {
+      which: 27
+    }))
+    assert.ok(!$dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is not shown after escape pressed')
+    done()
+  })
+
   QUnit.test('should not add class position-static to dropdown if boundary not set', function (assert) {
     assert.expect(1)
     var done = assert.async()