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

dom-events, ember.js, javascript, keydown, keypress

Solution

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 
}

Problem

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?

Original source