I've got an Ember component for modals. The modals will often contain forms, and so I'm using the keyPressed method in my component to catch various events, including any enter events (keycode 13). This gets all enter events, except ones originating from a focused {{input}} field. It looks like Ember is deliberately blocking these events from bubbling, and I can catch all the other keypress events from the input.
I haven't been able to find a clean way to catch the event from my component. I don't want to extend anything and use that instead, or use actions on specific controllers, or anything else like that, because they all feel like dirty workarounds for something that should be pretty simple, and also seems like an obvious use-case. How can I do this?
EDIT: little example, to help clarify my meaning a bit. I'd like keyPressed to run when a user hits enter in the input field.
// Relevant section of component
App.MyModalComponent = Ember.Component.extend({
// ...
keyPressed: function (e) {
if (e.which === 13) {
console.log('Do something here, like submit the form');
}
},
// ...
});
// Example of template
{{#my-modal}}
<form>
{{input value=foo}}
</form>
{{/my-modal}}
Are you talking about keyPress I don't see keyPressed as a supported event (http://emberjs.com/guides/understanding-ember/the-view-layer/#toc_adding-new-events).
App.MyModalComponent = Ember.Component.extend({
foo:'component',
keyPress: function (e) {
console.log('asdf');
if (e.which === 13) {
console.log('Do something here, like submit the form');
}
}
});