Should Ember's checkbox input helper bubble to their parent?

1

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!

2

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>
3

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.

4

I agree. I’ve seen this bug bite people in the past. Perhaps can be avoided by a runtime warning while in developer mode?

5

I don’t see why it is a bug but an action overlay warning would be nice.

6

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.

7

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.