Closing dropdown with ESC correctly sets focus to toggle (#28928)

Just firing the focus event isn't enough ... need to actually call the proper `focus()` method for it to actually do it...

diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index 6bae6a4b40b82af21b130551d905bb91f3abe2e6..729b64732aa220b454c1ca2674dbb60f0c9dee04 100644 (file)
--- a/js/src/dropdown.js
+++ b/js/src/dropdown.js
@@ -486,7 +486,7 @@ class Dropdown {
 
     if (!isActive || isActive && (event.which === ESCAPE_KEYCODE || event.which === SPACE_KEYCODE)) {
       if (event.which === ESCAPE_KEYCODE) {
-        EventHandler.trigger(SelectorEngine.findOne(Selector.DATA_TOGGLE, parent), 'focus')
+        SelectorEngine.findOne(Selector.DATA_TOGGLE, parent).focus()
       }
 
       Dropdown._clearMenus()

diff --git a/js/tests/unit/dropdown.js b/js/tests/unit/dropdown.js
index 63f83b3bb61b4877c25a9a1dd9f71412329d8754..ab0fdbd44460b2c68a1322b1fbe1380effcd40b9 100644 (file)
--- a/js/tests/unit/dropdown.js
+++ b/js/tests/unit/dropdown.js
@@ -765,6 +765,45 @@ $(function () {
     $triggerDropdown[0].dispatchEvent(new Event('click'))
   })
 
+  QUnit.test('should close dropdown and set focus back to toggle when escape is pressed while focused on a dropdown item', function (assert) {
+    assert.expect(3)
+    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 $item = $('#item')
+    var $toggle = $('#toggle')
+
+    $dropdown
+      .parent('.dropdown')
+      .on('shown.bs.dropdown', function () {
+        // Forcibly focus first item
+        $item.focus()
+        assert.ok($(document.activeElement)[0] === $item[0], 'menu item initial focus set')
+
+        // Key escape
+        var keydown = new Event('keydown')
+        keydown.which = 27
+        $item[0].dispatchEvent(keydown)
+
+        assert.ok(!$dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu was closed after escape')
+        assert.ok($(document.activeElement)[0] === $toggle[0], 'toggle has focus again once menu was closed after escape')
+        done()
+      })
+
+    $dropdown[0].dispatchEvent(new Event('click'))
+  })
+
   QUnit.test('should ignore keyboard events for <input>s and <textarea>s within dropdown-menu, except for escape key', function (assert) {
     assert.expect(7)
     var done = assert.async()