ember-wormhole failed to render into '#ember-basic-dropdown-wormhole' because the element is not in the DOM

When I try to add a dropdown to my application I get this error

ember-wormhole failed to render into '#ember-basic-dropdown-wormhole' because the element is not in the DOM

I am on ember-power-select 0.5.2 and ember 1.13.11

is it expected <div id="ember-basic-dropdown-wormhole"></div> is added by us to the body (that didnt seem to work) or the addon? should I add ember-wormhole as a dependency to my application?

[jackmatt2]

@cibernox this is now fixed using your suggestion.

     contentFor: function(type, config) {
            if (type === 'body-footer') {
              var emberBasicDropdown = this.addons.filter(function(addon) {
                return addon.name === 'ember-power-select';
              })[0];
              return emberBasicDropdown.contentFor(type, config);
            } else {
              return '';
            }
        }

[cibernox]

@jackmatt2 so, you are building an addon that depends in ember-power-select, and in the final app you install only your addon, correct?

If that is so, I know why is failing.

ember-basic-dropdown (used internally by ember-power-select) uses the contentFor hook for adding the placeholder div. But because of the way ember-cli works (and I think that it is intended), only the hooks of the direct dependencies of your app are run. That is why ember-power-select has to define the contentFor hook and call the contentFor of ember-basic-dropdown explicitly: https://github.com/cibernox/ember-power-select/blob/master/index.js#L23-L28

If your addon includes ember-power-select, you need to do the same and define the contentFor hook and in there, search among the addons for ember-power-select and invoke its contentFor.

Then, the chain will be your-addon —> power-select --> basic-dropdown