Question

Am I doing something wrong? Why isn’t the click event registering on the first keydown?

http://jsfiddle.net/vol7ron/VJ5CX/

In the example,

1. Click the "Menu" to make sure it has focus
2. Use the arrow keys (up/down) to highlight an option
3. Use the spacebar to select the option

Notice how the change() event is not being called. Use the spacebar again to select the same option and notice it is working as it should.

---

I’ve tried:

• using the blur/focus according to this question, but haven’t had any luck
• setting the checked attribute to false, to make sure the change event is triggered

Interesting Findings:

• There isn’t a problem when using a mouse (it triggers the change event on the first time, as expected)
• The problem still occurs for the keydown, even after selecting with the mouse (run, click an option, hover to the option and use the keyboard).

Expected Results:

• Using keyboard navigation (up/down arrows) and selecting with the spacebar, should trigger both the "keydown" and "click" log. It doesn’t work on the initial keydown, but does every subsequent time. (Check Firefox for a working example)

Answer 1

I was using blur/focus on the initial load. Apparently I needed the blur/focus inside the keydown event:

if (e.keyCode == 13 || e.keyCode == 32) {
   var cb = container.find('label.x-hover input:checkbox');

   cb.blur();             // <-- added
   cb.focus();            // <-- added
   cb.click();  
   updateLog('keydown');
   oTitle.focus();      
   return false;
}