From 1da3aa310314dd8a58e4ab056fdce5650c8525b7 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Mon, 17 Jun 2019 14:50:43 +0100
Subject: [PATCH] Don't open dropdown on ESC on trigger element (#28912)

* Don't open dropdown on ESC on trigger element

Closes #28751
---
 js/src/dropdown.js        |  4 ++++
 js/tests/unit/dropdown.js | 25 +++++++++++++++++++++++++
 2 files changed, 29 insertions(+)

diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index d336a46d91..1121a9819e 100644
--- 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 1ecfd1f8bf..652ec480e9 100644
--- 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()