The options are not visible in modals

The list of options in ember-power-select has by default z-index: 1000. This apparently magical number is the same that some popular css frameworks like bootstrap use by default for dropdowns. Modals usually have higher z-indexes (bootstrap itself uses 1050) because if a modal opens unexpectedly while ember-power-select is open, you don't want the list of options to be placed on top.

However if you want to render a select inside a modal, that is a situation you can predict and design for. There is two possible solutions:

  1. Add a specific class to the select (p.e. dropdownClass="in-modal-dropdown") will make the dropdown to have the class "in-modal-dropdown". You can increase the z-index of this kind of selects.

  2. Pass renderInPlace=true. This will make the list of options be placed next to the trigger instead of being attached to the body, and therefore it won't be afected by this z-index issue. Keep in mind that when rendered in place the list of options will loose its ability to intelligently position itself above the component if the space below is too small to fit it.

Nothing is rendered when I click the select

This addon uses the contentFor hook to add an empty div in the {{content-for "body-footer"}} placeholder defined in the index.html of most ember-cli applications.

If your application is deviating from the standard approach (by example if you're attaching your app to a specific node) this approach might not work for your and you'll need to add a <div id="ember-basic-dropdown-wormhole"></div> manually in your application.hbs.