# Sub-component action not bubbling up **URL:** \ **Category:** Uncategorized\ **Created:** [November 18, 2014, 5:32pm UTC](https://discuss.emberjs.com/t/sub-component-action-not-bubbling-up/6739 "2014-11-18T17:32:28Z")\ **Posts on this page:** 10\ **Page:** 1
**Author:** ![xBlack](https://avatars.discourse-cdn.com/v4/letter/x/96bed5/32.png) [@xBlack](https://discuss.emberjs.com/u/xBlack)\ **Post date:** [November 18, 2014, 5:32pm UTC](https://discuss.emberjs.com/t/sub-component-action-not-bubbling-up/6739/1 "2014-11-18T17:32:28Z")
I’m trying to send actions from a nested component. The problem is the, the action only get sent from the first level. Here is a [jsbin](http://jsbin.com/nexidiyife/2/edit) showing the problem. If you expand the tree and click, the action doesn’t make it through all the way up to the parent route. Any idea how to get it working? ---
**Author:** ![Panman8201](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/panman8201/32/17727_2.png) [@Panman8201](https://discuss.emberjs.com/u/Panman8201)\ **Post date:** [November 18, 2014, 5:37pm UTC](https://discuss.emberjs.com/t/sub-component-action-not-bubbling-up/6739/2 "2014-11-18T17:37:30Z")
From my understanding, parent Components would need to “send up” the action. They don’t automatically bubble like actions on a Controller to a Route and up the tree that way. Ember 1.9 will alert you when your scenario happens, components that don’t handle a triggered action. > **[Release Ember 1.9.0-beta.3 · emberjs/ember.js](https://github.com/emberjs/ember.js/releases/tag/v1.9.0-beta.3)** > > Ensure initializers have a name property (provides a helpful assertion if missing). > \[BUILD TOOLING\] Enable easier cross-browser testing by publishing builds and tests to S3. > Enable Ember.run.join t... From the Guides: > Instead of sending an action to the template’s controller, then bubbling up the route hierarchy, actions sent from inside a component are sent directly to the component’s Ember.Component instance, and do not bubble. [http://emberjs.com/guides/components/handling-user-interaction-with-actions/](http://emberjs.com/guides/components/handling-user-interaction-with-actions/) ---
**Author:** ![xBlack](https://avatars.discourse-cdn.com/v4/letter/x/96bed5/32.png) [@xBlack](https://discuss.emberjs.com/u/xBlack)\ **Post date:** [November 18, 2014, 5:45pm UTC](https://discuss.emberjs.com/t/sub-component-action-not-bubbling-up/6739/3 "2014-11-18T17:45:26Z")
I thought with sendAction I was sending the action up. Otherwise, how is it working for the first level. It seems to me that the problem may be with naming and nesting? I can’t see what the issue is. ---
**Author:** ![amk](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/amk/32/9116_2.png) [@amk](https://discuss.emberjs.com/u/amk)\ **Post date:** [November 19, 2014, 6:10pm UTC](https://discuss.emberjs.com/t/sub-component-action-not-bubbling-up/6739/4 "2014-11-19T18:10:23Z")
I struggled with this for ages too. You have to ‘forward on’ the action until it gets to where you want it. This can be a pain if you have nested components - because each component ends up ‘needing to know’ about a certain action when it might not even need to. ---
**Author:** ![chrisgame](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/chrisgame/32/9930_2.png) [@chrisgame](https://discuss.emberjs.com/u/chrisgame)\ **Post date:** [December 6, 2014, 11:20am UTC](https://discuss.emberjs.com/t/sub-component-action-not-bubbling-up/6739/5 "2014-12-06T11:20:01Z")
xBlack looks like your js bin works now. I have the same problem but my component uses more the one action so i can’t use the default action name. When i use named actions they work at the component to component level [jsbin example here](http://jsbin.com/leliqa/1/edit?html,js,console,output). But not at the component to controller level [jsbin example here](http://jsbin.com/leliqa/2/edit?html,js,console,output). I think i’m missing something obvious but i cant see it! ---
**Author:** ![plexus](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/plexus/32/9969_2.png) [@plexus](https://discuss.emberjs.com/u/plexus)\ **Post date:** [December 12, 2014, 10:50am UTC](https://discuss.emberjs.com/t/sub-component-action-not-bubbling-up/6739/6 "2014-12-12T10:50:21Z")
I’ve spent half a day digging into this, and eventually found that you can have all actions bubble by aliasing `target` to `targetObject` in the outer component. ```nohighlight App.OuterComponent = Em.Component.extend target: Em.computed.alias("targetObject") ``` I can’t decide though if this is a clean way to opt-in to event bubbling, or if it comes too close to implementation details, i.e. might easily break with future updates. Thoughts? * * * (details of why this works) A Component’s `sendAction` is a wrapper around [TargetActionSupport](http://emberjs.com/api/classes/Ember.TargetActionSupport.html)’s `triggerAction`. This does ```auto this.get("targetObject").send(actionName)` ``` When `send` (implemented in [ActionHandler](http://emberjs.com/api/classes/Ember.ActionHandler.html)) gets the action, it will look in the `actions` hash, or bubble by doing ```auto this.get("target").send(actionName)` ``` The result: only objects with a `target` will forward the event. Component’s don’t have a target, so they can’t let the event bubble up. Either they handle it, or it’s gone. ---
**Author:** ![Frozenfire](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/frozenfire/32/9227_2.png) [@Frozenfire](https://discuss.emberjs.com/u/Frozenfire)\ **Post date:** [September 27, 2015, 1:28am UTC](https://discuss.emberjs.com/t/sub-component-action-not-bubbling-up/6739/7 "2015-09-27T01:28:59Z")
Thank you! Been struggling with this for a while, really unintuitive. Just remember to pass the controller as the target in the handlebars and no need to manually do the alias! ---
**Author:** ![jwm](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jwm/32/11517_2.png) [@jwm](https://discuss.emberjs.com/u/jwm)\ **Post date:** [October 13, 2015, 12:35pm UTC](https://discuss.emberjs.com/t/sub-component-action-not-bubbling-up/6739/8 "2015-10-13T12:35:14Z")
I spent quite a lot of time struggling with this tonight. There is a good answer [here on stack overflow](http://stackoverflow.com/questions/27146152/ember-nested-component-action-not-bubbling) that shows you how to deal with this nicely. ---
**Author:** ![Timofei\_Mironov](https://avatars.discourse-cdn.com/v4/letter/t/13edae/32.png) [@Timofei\_Mironov](https://discuss.emberjs.com/u/Timofei_Mironov)\ **Post date:** [October 13, 2015, 1:47pm UTC](https://discuss.emberjs.com/t/sub-component-action-not-bubbling-up/6739/9 "2015-10-13T13:47:54Z")
If you render component using `render()` from route, none of this are working, because both `this.get('target')` and `this.get('targetObject')` are nulls. Sample: ``` this.render('components/lightbox', { outlet: 'modal', view: 'lightBox', into: 'application', controller: this.controllerFor('application') }); ``` `this.get('controller')` inside component is also null. :((( ---
**Author:** ![nicolasd](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/nicolasd/32/10089_2.png) [@nicolasd](https://discuss.emberjs.com/u/nicolasd)\ **Post date:** [December 28, 2015, 12:12pm UTC](https://discuss.emberjs.com/t/sub-component-action-not-bubbling-up/6739/10 "2015-12-28T12:12:14Z")
Have you tried to bubble the action with the new colsure style? [Ember.js 1.13.0 and 2.0 Beta Released](http://emberjs.com/blog/2015/06/12/ember-1-13-0-released.html#toc_closure-actions) Where does it want to bubble the action now? (you should normally see a warning, ‘action blub not implemented in \’ )