Ember Component Action Not Bubbling

Question

I have found duplicates of this problem, but I still fail to replicate the outcome of all the examples I have seen. I am working with an Ember.component and trying to bubble its action up to it's parent router (I also have previously tried to bubble up to controller).

Here is my code: Search-bar.hbs template

//------Search-Bar.hbs------//
<button class="btn btn-purple btn-lg" type="button" {{action 'submitSearch'}}>
  Search
  <i class="ace-icon fa fa-search icon-on-right bigger-110"></i>
</button>

Search-Bar Component.js

//------Search-Bar.js------//
import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    submitSearch() {
      this.sendAction('internalAction');
    }
})

Parent-Template.hbs

  {{inputs/search-bar internalAction='myAction'}}

Parent-Route.js

import Ember from 'ember';

export default Ember.Route.extend({
  actions: {
    myAction() {
      alert('myAction is called');
    }
  }
});

Why isn't this working? I console.log()'d everything it looks like it calls my submitSearch() action, but whatever is happening after that, it doesn't bubble up to the parent..

Answer 1

The code itself looks fine. Be sure to recheck your actual code for typos, as well as the paths for the files. You can see the expected paths in Ember Inspector if necessary.