Hello, this is my first post here so I hope I’m in the correct place (though I’ve enjoyed the discussions here for some time!). I working with a component that uses Ember’s checkbox input helper but am having trouble keeping click events constrained within the checkbox itself. The checkbox is contained within a div that has an action associated with it and whenever the checkbox is clicked, it triggers the div’s action.
App.MyCheckboxComponent = Ember.Component.extend({
isSelected: false,
actions: {
containerClicked: function(e) {
alert('container clicked');
}
}
});
I created a Fiddle to demonstrate the problem. Is this grounds for a bug report? I’m having trouble coming up for a situation where this would be desirable behavior, though I realize there are other very similar situations where it would be desirable. I’ve also never created a bug report so I thought it would be best to run it through here before trying to push it up the food chain. I’d love to hear other’s thoughts on this. Thanks!
Is it a bug? The container is clicked. Perhaps write something like this:
<script type="text/x-handlebars" data-template-name="components/my-checkbox">
<div style="background-color:#cccccc;white-space:nowrap;">
{{input type="checkbox" checked=isSelected }}
<div {{action 'containerClicked'}} style="display: inline-block;width:100%;">{{isSelected}}</div>
</div>
</script>
Yeah I realize there are ways I could avoid the problem. I thought I would run it by some people who are more experienced with ember though before I come to the conclusion that it is in fact a bug. I’ve never done a bug report before and don’t want to send the busy ember developers on a witch hunt for something that’s actually intended behaviour.
I agree. I’ve seen this bug bite people in the past. Perhaps can be avoided by a runtime warning while in developer mode?
I don’t see why it is a bug but an action overlay warning would be nice.
It’s currently not possible to use an action on a checkbox, which would give you access to the event so as to use stopPropagation(). This thread might give you some ideas for getting around that limitation.
Thanks for the reference to that thread Brian. I’m happy to hear this fix is already in the works. I’d be happy to help with it in whatever way I can, but it sounds like the change has already been merged for 2.0. Thanks for the insight everyone, I’ll consider this wrapped up.