Zurb Foundation Dropdown with EmberJS Actions

Within an EmberJS Application, it seems that Foundation's dropdown plugin interferes / stops you from using "actions" inside the content that is rendered in the dropdown.

For example, this should work fine, however the 'componentAction' action is never called. Any idea what could cause this?

<!-- application.hbs -->
{{my-dropdown}}

<!-- my-component.hbs -->
<a data-dropdown="drop2" aria-controls="drop2" aria-expanded="false">Has Content Dropdown</a>
<div id="drop2" data-dropdown-content class="f-dropdown content" aria-hidden="true" tabindex="-1">
  <p {{action "componentAction"}}>Some text that people will think is awesome! Some text that people will think is awesome! Some text that people will think is awesome!</p>
</div>



// my-component.js
import Ember from 'ember';
import layout from './template';

export default Ember.Component.extend({
  layout,

  didInsertElement() {
    this._super(...arguments);
    Ember.run.scheduleOnce('afterRender', this, function() {
      this.$().foundation('dropdown', 'reflow');
    });
  },

  action: {
    componentAction() {
      console.log('component action fired');
    }
  }
});