Idiomatic <select>

Learning Team
1

Hi.

I can’t find any mention of <select> usage in ember documentation. What is the idiomatic way to render select?

Currently, I have something like this (using ember-truth-helpers):

<select onchange={{action (mut option) value="target.value"}}>
  <option value="" selected={{if (eq option "") true}}>-- select option --</option>
  <option value="one" selected={{if (eq option "one") true}}>one</option>
  <option value="two" selected={{if (eq option "two") true}}>two</option>
</select>

It doesn’t seem right to use an addon (I can write eq helper myself, but that’s not the point) to render a simple <select>. Am I missing something?

2

Hello,

Choice is between using tried and tested components, or creating own (re-inventing the wheel).

You may want to consider ember power select component that provides good flexibility.

3

There is also x-select GitHub - adopted-ember-addons/emberx-select: Select component for Ember based on the native html select element. if you want the native select menu.

However, ember power select is my go to. Folks love the little search box :grin:

4

Huh. Power select it is then, I guess.

It just seems kinda strange that a pretty standard html element is really not easy to use :slight_smile:

5

You started by showing us that it’s entirely possible to write a <select>, only having to implement an eq helper in your case :wink:

<select> might seem simple, but it encapsulates complex logic with a lot of edge cases. A long time ago we used to provide a select, but it gave our users more problems than it was worth, so we gave it the boot. Thanks to the power of conventions and Ember CLI though, we now have two lovely addons that are one command away :smiley: