Bootstrap entry drop-down keyboard arrow

Question

I worked with the combobox (input + dropdown) created around Bootstrap in an accessibility project.

I came across a change that was made to the dropdown.js part of the bootstrap between v3.3.0 and v3.3.1, which breaks my code.

When the focus is on input , the up or down arrow used to launch the popup menu I want as the goal is to make keyboard navigation possible, but it doesn't work anymore.

When I compare:

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.js

and

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.js

The change was from (3.3.0, line 798)

 Dropdown.prototype.keydown = function (e) { if (!/(38|40|27|32)/.test(e.which)) return 

To (3.3.1, line 799)

 Dropdown.prototype.keydown = function (e) { if (!/(38|40|27|32)/.test(e.which) || /input|textarea/i.test(e.target.tagName)) return 

So, I know that maybe I can get around this with jQuery, but is there a real reason for this change? If not, this can be considered a bug report.

Below is a demo version of Bootply of my widget. It works with Bootstrap 3.3.0 and all below, but if you change the popup window of the bootstrap to something higher than 3.3.0, it will not respond to the arrow keys.

http://www.bootply.com/2gHt0MWRWd

Answer 1

There is ongoing discussion about this, as recorded in issue 15757 .

Correction was made in draft mode # 15088 ( Abyss down: ignore key change events from inputs and text fields ). They do not state why they had to go this way in the release, but after some digging I was able to find a problem / discussion with some developers and the Bootstrap team.

During the discussion, it was noted that it was added:

"so that spaces are printed in the input in the drop-down list"

They are still brainstorming the decisions, so I might suggest adding your two cents to the debate. Hope this helps.

Answer 2

Here is the fix for it:

 $('[data-toggle="dropdown"]').keydown(function(e){ if(e.which == 40){ $(this).dropdown('toggle'); } }); 

It just checks the down arrow (key code 40)

See here in action