Dropdowns: Skip `.disabled` instead of `.divider` on keydown event

Fixes #15147.
Closes #15520 by merging it.

diff --git a/js/dropdown.js b/js/dropdown.js
index 200e1c67b4ffbbc005e7f7319dab3bb2e77e3851..0ba3f87f54f4b630ab7e7c3cb9c0dbbdb1879484 100644 (file)
--- a/js/dropdown.js
+++ b/js/dropdown.js
@@ -72,7 +72,7 @@
       return $this.trigger('click')
     }
 
-    var desc = ' li:not(.divider):visible a'
+    var desc = ' li:not(.disabled):visible a'
     var $items = $parent.find('[role="menu"]' + desc + ', [role="listbox"]' + desc)
 
     if (!$items.length) return

diff --git a/js/tests/unit/dropdown.js b/js/tests/unit/dropdown.js
index ec718b9e01cbd6a5366b7e79cdc6c4eb5d5ac658..67b26174465a7a48d1ea37f8f28c18d065a1f97a 100644 (file)
--- a/js/tests/unit/dropdown.js
+++ b/js/tests/unit/dropdown.js
@@ -314,4 +314,25 @@ $(function () {
     $dropdown.click()
   })
 
+  QUnit.test('should skip disabled element when using keyboard navigation', function (assert) {
+    var dropdownHTML = '<ul class="tabs">'
+        + '<li class="dropdown">'
+        + '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
+        + '<ul class="dropdown-menu" role="menu">'
+        + '<li class="disabled"><a href="#">Disabled link</a></li>'
+        + '<li><a href="#">Another link</a></li>'
+        + '</ul>'
+        + '</li>'
+        + '</ul>'
+    var $dropdown = $(dropdownHTML)
+      .appendTo('#qunit-fixture')
+      .find('[data-toggle="dropdown"]')
+      .bootstrapDropdown()
+      .click()
+
+    $dropdown.trigger($.Event('keydown', { which: 40 }))
+    $dropdown.trigger($.Event('keydown', { which: 40 }))
+
+    assert.ok(!$(document.activeElement).parent().is('.disabled'), '.disabled is not focused')
+  })
 })