Create custom options
Ember Power Select exposes an onkeydown
action that allows you to
react to keyboard events before the default behaviour takes place. This gives
you the ability to enrich the component with very few lines of code.
Let's create one component on top of the multiple select that, besides of allowing you to select among the selected options, lets you create new options on the fly.
You guessed right, the typical tag creator.
Just define an action called onkeydown
. That action will check if
the pressed key is the Enter key, it was pressed while the component
is opened and there is no option highlighted and the used typed some text.
If those 4 conditions are met, create a new item, add it to the list of options
and use the choose
action of the select (received as first argument)
to select a new set of results.
Et voilĂ , you've created a component that allows you to create custom tags.
For the sake of completeness, this example takes a naive approach that doesn't cover all edge cases. By example, it isn't possible to create a tag named "York" above because it would match "New York". Check the ember-power-select-with-create addon for a more complete solution.