Octane and <select>

2

Yeah I know what you mean RE power select. I’ve used emberx-select in the past but with Octane it’s super easy to write a little select component like what you’re describing. This is a very basic one I wrote recently:

// app/components/u-i/select.hbs
<select
  class="..."
  ...attributes
  {{on "change" (pick "target.value" @onChange)}}
>
  {{yield (hash option=(component "u-i/select/option" currentValue=@value))}}
</select>

and the option component:

// app/components/u-i/select/option.hbs
<option value={{@value}} selected={{if (eq @currentValue @value) true false}}>{{@label}}</option>

And it would be invoked like this…

<UI::Select @onChange={{action (mut this.someProp)}} @value={{this.someProp}} as |s|>
  <s.option @label="option 1" @value="option1" />
  <s.option @label="option 2" @value="option2" />
</UI::Select>

Note that the select component uses the pick helper from ember-composable-helpers in order to avoid creating a backing js class with the action. So it would either require using ember composable helpers or defining a js class for the select component with the action handler.

3 Likes