Reputation: 5105
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?
Upvotes: 5
Views: 2576
Reputation: 5105
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
}
Upvotes: 12