Checkboxes un-clickable if contained within an element that has an action attached.

[hilem]

Simple example,

with an input tag of type="checkbox" contained inside it. Checkbox is clickable as expected. Now put an action on the containing div, say to catch click events... the checkbox is now unclickable. You can catch the 'change' event and see that it attempts to work as expected but is reverted after every time. Couple fiddles below:

works as expected....
http://jsfiddle.net/yp128r1e/

doesn't...
http://jsfiddle.net/yp128r1e/1/

[wagenet]

@hilem This isn't actually an issue with all event types. It appears to specifically be an issue with click. I suspect that Ember is preventing the default event behavior which the browser takes to mean the checkbox should not change state. I don't believe this is a bug. The solution would be to not apply an action handler in this way if you want to also handle other things like checkboxes.

[hilem]

@wagenet This is a very common design pattern. To be able to click anywhere in a row to select a row and not just the row's checkbox. The checkbox is added purely to reinforce that it is selectable and for accessibility reasons and what you're telling me is that the only way to deal with it is basically not to use a checkbox but fake a checkbox with images or whatever. As there is no other way to handle this. Which puts a lot of burden onto accessibility testing that would otherwise be fine. Btw, this is a non-issue with other form elements. I've only spotted this behavior with the checkbox. Its one thing to say Ember needs to punt on this issue for awhile as its too difficult to handle the way the code is currently architected but I don't see how you can argue that this isn't a bug.

[wagenet]

By default the action helper prevents the default action. In this case, that means that checkboxes will not trigger. You can override this by setting preventsDefault=false on the helper. See http://jsfiddle.net/yp128r1e/3/.

[hilem]

Thanks @wagenet !