backport #29523: skip hidden dropdowns while focusing

2 files changed, 42 insertions, 0 deletions

diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index 48125517ee..3f738b5c54 100644
--- a/js/src/dropdown.js
+++ b/js/src/dropdown.js
@@ -488,6 +488,7 @@ class Dropdown {
     }
 
     const items = [].slice.call(parent.querySelectorAll(Selector.VISIBLE_ITEMS))
+      .filter((item) => $(item).is(':visible'))
 
     if (items.length === 0) {
       return
diff --git a/js/tests/unit/dropdown.js b/js/tests/unit/dropdown.js
index bfe5aebf58..7bc1abca20 100644
--- a/js/tests/unit/dropdown.js
+++ b/js/tests/unit/dropdown.js
@@ -1585,4 +1585,45 @@ $(function () {
 
     dropdown.show(true)
   })
+
+  QUnit.test('it should skip hidden element when using keyboard navigation', function (assert) {
+    assert.expect(3)
+    var done = assert.async()
+
+    var fixtureHtml = [
+      '<style>',
+      '  .d-none {',
+      '    display: none;',
+      '  }',
+      '</style>',
+      '<div class="dropdown">',
+      '  <button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+      '  <div class="dropdown-menu">',
+      '    <button class="dropdown-item d-none" type="button">Hidden button by class</button>',
+      '    <a class="dropdown-item" href="#sub1" style="display: none">Hidden link</a>',
+      '    <a class="dropdown-item" href="#sub1" style="visibility: hidden">Hidden link</a>',
+      '    <a id="item1" class="dropdown-item" href="#">Another link</a>',
+      '  </div>',
+      '</div>'
+    ].join('')
+
+    $(fixtureHtml).appendTo('#qunit-fixture')
+
+    var $dropdownEl = $('.dropdown')
+    var $dropdown = $('[data-toggle="dropdown"]')
+      .bootstrapDropdown()
+
+    $dropdownEl.one('shown.bs.dropdown', function () {
+      $dropdown.trigger($.Event('keydown', {
+        which: 40
+      }))
+
+      assert.strictEqual($(document.activeElement).hasClass('d-none'), false, '.d-none not focused')
+      assert.strictEqual($(document.activeElement).css('display') === 'none', false, '"display: none" not focused')
+      assert.strictEqual(document.activeElement.style.visibility === 'hidden', false, '"visibility: hidden" not focused')
+      done()
+    })
+
+    $dropdown.trigger('click')
+  })
 })