Action handling

Action handling

Ember power select aims to be maximally flexible and because of that it doesn't try to make strong assumptions about how you want to use it. Instead it embraces DDAU (Data Down Actions Up) philosophy of Ember 2.0 so data flow always is unidirectional and explicit.

Data changes that occur in the component are not propagated to the outside using two-way bindings, but rather they are communicated via actions.

This section describes the available actions with the notable exception of the search, because there is an entire section dedicated to it, and gives you some examples of what you can do with each of them.

onchange Action

This action will fire whenever an option of the component is selected or unselected.

The most common use case when you want changes inside a component to do something on its context is expressed this way:


That gives you the freedom of doing whatever suits your needs when the user selects a value.
If the only thing you want to do is update the value, you can make it more concise by using the mut helper.


It might seem a bit more verbose at first for this, the simplest use case possible, but it simplifies a lot the mental model and enables some advanced usages that would otherwise be very tricky to implement.

onkeydown Action

The second option you can provide to the component to customize it's behavior is onkeydown. This option will be fired whenever the user presses a key while the component or the search input inside have the focus.

This action receives two arguments, dropdown and event. The first one is an object that you can use to control the component through its actions (open, close, toggle...). The event is the raw keydown event you can use to decide what to do next. If you desire to hijack the browser's default bahaviour you can call preventDefault on that event. If you want to avoid the component's default behaviour (e.g., open/close the select or navigate through the options using the arrow keys) return false from this action.

One particular common use case for this action is to add new options in multiple selects when the user introduces free text.

oninput Actions

Selects might have searchboxes. When you type on them you usually want to search, which is the default behaviour, but what if you whant to do other things before searching? Then you have the oninput action that is fired before the search.

This action gives you the opportunity to react to any change in the inputs of the select, even when the inputs are emptied, because the search action doesn't fire in that case. If you return false from this action, you will prevent the default behavior, which is searching.

Let's create a select that searches only if the length of the search is bigger than 3 chars.

onfocus/onblur Actions

The next actions you can use are onfocus/onblur. It does exactly what the names suggests and receives (select, event)

You can use this action for many things (fire a request to prefetch data, show a tooltip, trigger some animation ...) but perhaps the most straightforward use case is to automatically open the component on focus.

Note that this action will be fired when the component or another element inside, like the searchboxes, gain the focus, and sometimes you need which one triggered the focus/blur event. Since the FocusEvent is received as last argument, you can check to know what element gets the focus, and event.relatedTarget to know the element that had the focus before.

onopen/onclose Actions

As their names suggest, these actions are fired when the component is about to be opened or closed respectively, and they both have the same signature (select, event) (the event will be undefined if the component is not opened as result of user interaction).

You can use this action for many useful purposes, but since the troll-force is strong in me, I want to show a useless example: The select components for spies!

Once opened this component will destroy itself in 8 seconds

Selected number:

Another neat trick is that you can prevent the component from open/close if you return false from these actions, so you have the last word. This is all it takes to create a mandatory select component that once opened cannot be closed until you select some value, and changes the styles of the component.

I really NEED this info

Have I mentioned that your can also render groups?