Create custom options

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.