EmberView 'keydown' and 'keypress' events do not render?

Question

I have an EmberApp that has a keyDown event which I intend to make available when a particular view is rendered, let's call this the PostsCommentView , to do this, I do:

App.PostsCommentView = Ember.View.extend({
   eventManager:Ember.Object.extend({
      keyDown:function(event,view){
             console.log("keydown");  // I CAN see this
      },
      click: function(event,view){
              console.log("clicked"); // I CAN see this
      }
   })
    didInsertElement:function(){
              console.log("I have been inserted"); // I CAN see this
    }

});

As you can read from my code, the view definitely does insert and a click event does log "clicked" into the console as well but NOT for the keydown event.

I searched around, and it seems like, I need to set focus on the 'view' in order for a keyDown event to register. So I add this to my didInsertElement function:

this.$().focus();

However, that did not work either. On a side note, I added the keyDown event to a Textarea view that extends Ember.TextArea and it DID register the keyDown event.

What am I missing here?

Answer 1

So I figured what was going wrong, the answer to this lies in the fact that 'keydown' events cannot be triggered unless the main element has a focus on it. This, off course, as my code specifies can be resolved with

this.$().focus();

However, it goes 1 level deep. The default element being rendered by this EmberView is a div, and it needs to be a div. Div's cannot be 'focussed' upon unless you explicitly make use of the 'tabindex' property, setting it to either -1 (cannot be tabbed into) or 0 (can be tabbed into and is focusable).

So I did this in my view's didInsertElement

didInsertElement(){
   this.$().attr('tabindex',0);
   this.$().focus();
},
keyDown:function(){
   console.log('keydown function was triggered') ; // This time it logs itself fine 
}