bootstrap input dropdown keyboard arrow

Question

I was working with combobox ( input + dropdown ) built around Bootstrap on an accessibility project.

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

When focus is the input, the up or down keyboard arrow used to trigger the dropdown menu which is what I want since the goal is to make keyboard-only 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 I can probably work around it with jQuery but is there a real reason for this change ? If not, this can be regarded as a bug report.

Below is a Bootply demo of my widget. Works with Bootstrap 3.3.0 and anything below but if you change the bootstrap version popup to anything above 3.3.0, it doesn't respond to arrows key.

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

Answer 1

There is currently an ongoing debate about this, as logged in issue 15757.

The adjustment was made in pull #15088 (Dropdown: Ignore keydown events coming from inputs and textareas). They don't state "why" it was necessary to go that route in the release, but after some digging I was able to find the issue/debate involving some developers and the Bootstrap team.

In that debate, it was mentioned that it was added:

"to allow spaces to be typed out in an input within a dropdown"

They are still brainstorming a solution, so I might suggest adding your two cents into the debate. Hope this helps.