Using Power Select to Create Interactive, User-Editable Drop-Downs

Ember Power Select is an easy-to-use, flexible and powerful component that I recently used to tackle some challenging front-end feature designs. My current project is a web portal where users can view and filter reports based on a large combination of different criteria. A recent project feature allows users to create filter combinations, save them, delete them, and name (and rename) them….all within a single dropdown.

At the time, we were using ember-select2, which was deprecated as of August 2016. It turned out that ember-select2 wasn’t powerful enough for the dropdown that we needed, so we upgraded to its successor, Power Select.

Getting Started with Ember Power Select

First, you’ll need to install Ember Power Select. Do this by running this command within your project directory:

$ ember install ember-power-select

Basic Power Select Dropdowns

In the most basic case, Power Select is quite a bit like ember-select2, with a few name changes. The example shown below allows someone to pick from a list of filters.

See the code in the full post.

Let’s go through the options on the Power Select component.

  • options is the list of options to choose from. This will be provided as the block param |filter|.
  • placeholder is the placeholder text that will be shown before a user chooses an option.
  • searchEnabled allows you to turn on or off the search box within the expanded dropdown view (this is enabled by default).
  • onChange assigns the action that will happen when a new option is chosen. Here, we are using (action (mut selectedFilter)) which will mutate selectedFilter with each change. There are more action options that can be enabled, but onChange is required. See the bottom of this page for the additional options.
  • selected stores the value of whatever option is chosen. In this example, if I select “Default Filter” as the selected filter, that object will be bound to |filter|.

Important: if you render the selected item here (rather than in a separate component, as shown later in this post), then the keys within the options must match the keys within the selected item. In this example, {{}} will render each filterOption as {{}} in the expanded dropdown view, and the selectedFilter as {{}} in the closed dropdown view.

Why wouldn’t these objects be the same, you ask? Because Ember Power Select lets you fully customize what actions (and assignments) happen on a selection.

Instead of using the mut syntax shown above, you can declare a custom action to be used onChange. The block param |filter| is automatically provided as a parameter to whatever function you declare.

See the code in the full post.

Adding Items and Actions within Expanded Dropdown Rows

Let’s add some icons within our dropdown. First, I’ll add an icon for each row into the filterOptions array in my .js file. Then I’ll add an <img>tag within the Power Select block.

See the code in the full post.

We can also add a button to the Handlebars file, and then connect that to a ‘deleteFilter’ action in the .js file that will remove options from the dropdown in real time.

See the code in the full post.

Rendering Custom Components within the Dropdown Frame Itself

The dropdown row’s delete buttons let us remove filters, but what if we want to rename filters? Because of various constraints, the dropdown area has to double as an entry field that would let you edit the name in place.

What we’re doing with the closed dropdown view here is very different from the open dropdown rows. As such, we’ll want to use a special component view for the selected option, rather than using the block template we’ve been using so far. I’ll call the selected option component “dropdown-edit,” and pass that into the Power Select block as the selectedItemComponent option. The new syntax looks like this:

See the code in the full post.


  • Returning false from the onkeydown option’s action (preventSpaceBar, in our case) forces the dropdown menu to stay open. Removing this would cause the deleteFilter action to still happen, but the dropdown would be closed immediately, forcing the user to open it to see if the filter was, in fact, deleted.
  • The data-option-index="-1" aria-disabled=true lines on the button div are an unfortunate but required bit of code to keep Power Select from recognizing the button click as a selection of the overall dropdown row that the button is in.

My dropdown-edit component renders one of two views: either just the filter name (and an edit icon), as in the previous cases, or an input box. There’s a bit of CSS to make the styling look nice, which I won’t include here. The main goal of the CSS here is to adjust the spacing to make the input box seamlessly overlap the dropdown box.

Note: To set the styling on all Power Select components, you can use the pre-defined variables provided here.

See the code in the full post.

Et voilà!

Originally published at on December 6, 2016.

Like what you read? Give Atomic Object a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.