How can I prevent a parent component from invoking an action when I click on a child component?

Question

I have the following template bit in a project I'm working on:

<div class="item row" {{action "expandItem"}}> {{input type="checkbox" checked=isChecked}} {{item.name}} </div> 

The problem that I am facing is that clicking on the checkbox does not change its state. However, it triggers the expandItem action. I would like the behavior to be that clicking on changes to the isChecked checkbox, but clicking elsewhere in the div fires expandItem . How can i do this?

EDIT: The question Stop the distribution of a clip from an Ember action is very close, but the difference, as I see it, is that the child in another question uses {{action}}, which can easily stop the distribution using bubbles = false. In my case, I don’t necessarily connect to how the Ember tab triggers an action by default

SECOND EDIT: I recreated exactly the behavior that I observe in this JSBin . You will notice how the input component and the built-in action helper behave differently. Hope this helps.

Answer 1

Since Ember 1.13.3 you can do the following (the example does not use the input helper, and I would not recommend using it if possible):

Template:

 <label onclick={{action "stopPropagation"}}> <input type="checkbox" checked={{checked}} onchange={{action "check" value="target.checked"}}> </label> 

Component / Controller:

 actions: { check() { this.toggleProperty('checked'); }, stopPropagation(event) { event.stopPropagation(); } } 

You cannot just stop the action from spreading with bubbles=false , since in this case event.preventDefault also called the default shutdown by default.

Here is Ember Twiddle

Answer 2

I was intrigued by this problem, as far as I see, there is no own way to prevent the appearance of bubbles from the input assistant.

But there is a workaround. Create an invisible div floating above the flag and use the click event that selects the base flag:

Template:

 <div class="item row" {{action "expandItem"}}> <div style="position-absolute; display: inline-block;"> <div {{action "toggleSelect" bubbles=false}} style="position: absolute;left: 0;width: 12px;top: 0;bottom: 0;"></div> {{input type="checkbox" checked=isChecked}} </div> {{item.name}} </div> 

Action in controller / component:

 actions: { toggleSelect() { this.set('isChecked', !this.get('isChecked')); } }