From 29f585365fe71a74958d56beac98ab4b7e27a6b1 Mon Sep 17 00:00:00 2001
From: Johann-S <johann.servoire@gmail.com>
Date: Mon, 28 Oct 2019 13:34:11 +0100
Subject: [PATCH] backport #29523: skip hidden dropdowns while focusing

---
 js/src/dropdown.js        |  1 +
 js/tests/unit/dropdown.js | 41 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 42 insertions(+)

diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index 48125517ee11..3f738b5c5444 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 bfe5aebf589c..7bc1abca20c2 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')
+  })
 })