select with ngKeypress = complete weirdness

[jbruni]

I just want to perform something upon a keypress event in a select element.

Check what happens in this extremely simple Plunker, where a counter is incremented inside the "keypress" event handler:

http://plnkr.co/edit/JBsHgO3BlVR0rt87TffW?p=preview

I'm using Ubuntu 12.04 64 bits. Focusing the select element and pressing the up/down arrow keys...

In Chrome 29.0.1547.65: the counter does not increment, as if the function is simply not called at all, maybe due to ng-keypress not being evaluated. But the select element works fine.

In Firefox 23.0: the counter does increment - this means ng-keypress is evaluated, and the event handler function is being called successfully. But the select option remains the same and, for my utter astonishment, the background color gets increasingly blue on each keypress!

Well... something is definetely not right here...

I've seen issues #4216 and #2616 - they are also related to keyboard + select, but it seems nobody there actually tried to combine the select with ngKeypress yet...

If you are reading this, please inform us what happens in the Plunker using your browser. Thank you.

[petebacondarwin]

First, keypress events should not be triggered by the up/down keys: See the "special keys" section here: http://www.quirksmode.org/dom/events/keys.html.

I changed the Plunker to use ng-keydown instead. This works as long as the drop-down is not open. See http://plnkr.co/edit/1eTWFnYmcX2RYdCqihJe?p=preview

Either way this is, once again, an issue with how browsers interpret key presses with select and is very much browser specific. There is little that AngularJS can do to fix this.

[jbruni]

Thanks for the attention and the information. 👍

[edvardchen]

@petebacondarwin Thank you for sharing ! It does end my nightmare