Dropdown: don't ignore keydown from input or textarea: there's a more natural solution.

Created by: lddubeau

Versions

Browser: Chrome 39 OS: Debian testing, as of 2015-02-04. Bootstrap: 3.3.2

What steps will reproduce the problem?

Open this bin that uses Bootstrap 3.1.1 http://jsbin.com/cilope and do:

1. Ignore "Custom Key Events" for now. Click on "Stock Key Events".
2. Click in the text field.
3. Type the down arrow on the keyboard.

The first item in the menu will be highlighted.

Now open this bin that uses 3.3.2 http://jsbin.com/horino and perform the same steps as above. The first item in the menu won't be highlighted.

What is expected to happen?

In both cases the first item in the menu should be highlighted.

What happens instead?

In the 2nd case (Bootstrap 3.3.2), it is not highlighted.

Observations

The problem is with the test at the start of the keydown method. Specifically the 2nd part of the test that checks the tagName of the target of the event:

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

It seems to be an attempt at preventing keyboard events that originated in an input or textarea that is a child of the dropdown from being processed by the dropdown. But what if the developer does want the dropdown to process the event? In my case, I have a dropdown menu with a filter field at the start that allows narrowing the set of choices. I do want the user to be able to hit the down arrow key while in the field to move to menu items.

Ok, what about those people who do not want the event to be processed by the dropdown? They can use the time-tested and customary method of calling stopPropagation on the event, either explicitly or by returning false from their event handler if they also want to prevent default handling. There are two examples of this in the bins above. First, there's the click event which has a handler on the input field preventing it from propagating to the dropdown. Then there's the "Custom Key Events" dropdown which works both in 3.1.1 and 3.3.2. It captures the down arrow key, clears the field and prevents it from propagating to the dropdown.

There's no need for /input|textarea/i.test(e.target.tagName).. Not only is it not needed but it complicates the lives of the developers who use Bootstrap.