Ember Action - Bubbles

I have a row which contains a drop down in which individual drop down item contains specific actions. The row also has an action. In order to avoid the bubbling of row action in drop down, i have to set bubbles as false. [ {{action bubbles=false}}] It throws an error, “Uncaught TypeError: Cannot read property ‘value’ of undefined” . I guess it might be due to the absence of action name.

Sample:

<tr {{action "rowAction"}}>
   <div class="dropdown">
         <span data-toggle="dropdown" {{action bubbles=false}}> //image </span>
         //drop down menu
        <ul>
           <li {{action "doSomething" bubbles=false}}></li>
         // other drop down list
       </ul>
   </div>
</tr>

Is there any solution for this case? TIA.

This line definitely doesn’t look right. You’ll definitely need an action name for the action helper. Or could you just get rid of the action helper there?

The API docs actually have a suggested solution: https://emberjs.com/api/ember/release/classes/Ember.Templates.helpers (see the disableBubbling helper under “Event Propagation).

2 Likes

@dknutsen @lennyburdette thanks for the suggestion. :grinning: