# Component action not bubbling to the route

**URL:** <https://discuss.emberjs.com/t/component-action-not-bubbling-to-the-route/8789>\
**Category:** Uncategorized\
**Created:** [September 16, 2015, 2:18pm UTC](https://discuss.emberjs.com/t/component-action-not-bubbling-to-the-route/8789 "2015-09-16T14:18:15Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![paulbyrne](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/paulbyrne/32/11014_2.png) [@paulbyrne](https://discuss.emberjs.com/u/paulbyrne)\
**Post date:** [September 16, 2015, 2:18pm UTC](https://discuss.emberjs.com/t/component-action-not-bubbling-to-the-route/8789/1 "2015-09-16T14:18:15Z")

</div>

Still having an issue sending an action in a nested component to a higher up route. I have a component template, product-item

```auto
<button onclick={{action (action "addItem" product)}}>Choose</button>

```

which is nested in another template, products-list, as follows:

```auto
{{#each products as |product|}}
  {{product-item product=product addItem="addItem"}}
{{/each}}

```

On the product-item.js file I have this action:

```auto
addItem: function(product) {
  this.sendAction('addItem', product);
}

```

And on the route :

```auto
actions: {
  addItem: function(product) {
    ...
  }

```

But I when I click the button I get had no action handler defined error. I want it to bubble to the route so I can access the store. Any idea what the issue is? The action reaches the product-item component action handler, when I stick a debugger in there it picks it up.

---

<div class="post-metadata">

**Author:** ![neil\_t\_anderson](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/neil_t_anderson/32/15752_2.png) [@neil\_t\_anderson](https://discuss.emberjs.com/u/neil_t_anderson)\
**Post date:** [September 17, 2015, 6:53pm UTC](https://discuss.emberjs.com/t/component-action-not-bubbling-to-the-route/8789/2 "2015-09-17T18:53:11Z")

</div>

I don’t know the answer, seems like it should work. Just an observation, is

`{{action (action "addItem" product)}}` a typo? shouldn’t it be `{{action "addItem" product}}` ?

AFAIK it should go bubble controller to route and then through the route hierarchy, if you put an action handler on the controller is it invoked?

---

<div class="post-metadata">

**Author:** ![mwpastore](https://avatars.discourse-cdn.com/v4/letter/m/e19b73/32.png) [@mwpastore](https://discuss.emberjs.com/u/mwpastore)\
**Post date:** [September 18, 2015, 4:12am UTC](https://discuss.emberjs.com/t/component-action-not-bubbling-to-the-route/8789/3 "2015-09-18T04:12:37Z")

</div>

Adding to Neil’s reply, I think instead of this:

`<button onclick={{action (action "addItem" product)}}>Choose</button>`

You really want this:

`<button {{action "addItem" product}}>Choose</button>`

Click is the default event; if you wanted to listen for a different event, the `on` would actually go _inside_ the `{{action}}`, e.g.:

`<button {{action "addItem" product on="mouseUp"}}>Choose</button>`

> **[Sending Actions from Components to Your Application - Components - Ember Guides](https://guides.emberjs.com/v1.13.0/components/sending-actions-from-components-to-your-application/)**
>
> When a component is used inside a template, it has the ability to send actions to that template's controller and routes. These allow the component to inform the application when important events, such as the user clicking a particular element in a...

> **[Actions - Templates - Ember Guides](https://guides.emberjs.com/v1.13.0/templates/actions/)**
>
> The {{action}} Helper 
> 
> Your app will often need a way to let users interact with controls that change application state. For example, imagine that you have a template that shows a blog post, and supports expanding the post with additional...

---

<div class="post-metadata">

**Author:** ![broerse](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/broerse/32/9497_2.png) [@broerse](https://discuss.emberjs.com/u/broerse)\
**Post date:** [September 18, 2015, 5:04am UTC](https://discuss.emberjs.com/t/component-action-not-bubbling-to-the-route/8789/4 "2015-09-18T05:04:52Z")

</div>

You can use `this.sendAction('deleteAction');` and bubble yourself. See:

[https://github.com/broerse/ember-cli-blog/blob/master/app/components/blog-post-edit.js](https://github.com/broerse/ember-cli-blog/blob/master/app/components/blog-post-edit.js)[https://github.com/broerse/ember-cli-blog/blob/master/app/components/blog-post.js](https://github.com/broerse/ember-cli-blog/blob/master/app/components/blog-post.js)[https://github.com/broerse/ember-cli-blog/blob/master/app/templates/post.hbs](https://github.com/broerse/ember-cli-blog/blob/master/app/templates/post.hbs)[https://github.com/broerse/ember-cli-blog/blob/master/app/routes/posts.js](https://github.com/broerse/ember-cli-blog/blob/master/app/routes/posts.js)