@zestia/ember-select-box

Select box solutions are rarely perfect for what you want.

They come with a myriad of options to configure every possible situation, and they make too many assumptions about how your select-box should behave.

This addon does less, and gives you the primitives to easily compose your own.

Installation

ember install @zestia/ember-select-box

Demo

https://zestia.github.io/ember-select-box

Features

• Native select box (that supports complex values) ✔︎
• Faux select box (mimics a native select box, but easily stylable) ✔︎
• Navigatable options and groups ✔︎
• ARIA Attributes ✔︎
• Supports promises ✔︎
• Any HTML you want ✔︎
• Will never come with built-in styles ✔︎
• Ember Data friendly ✔︎
• Full control at all times with the API ✔︎
• Native-like typeahead behaviour ✔︎
• Very few issues over many years of Ember! ✔︎
• Easily create an autocompleter ✔︎
• Easily create a dropdown menu ✔︎

Example

To create your own select box, make a new component that renders a select box:

{{! foo-select.hbs }}
<SelectBox
  class="foo"
  @value={{@value}}
  @onSelect={{@onSelect}} as |sb|
>
  <sb.SelectedOption {{on "click" sb.toggle}}>
    {{sb.value.name}}
  </sb.SelectedOption>
  <sb.Options>
    {{yield sb}}
  </sb.Options>
</SelectBox>

...and then use it like this:

{{! application.hbs }}
<FooSelect
  @value={{this.foo1}}
  @onSelect={{this.handleSelectFoo}} as |sb|
>
  {{#each this.foos as |foo|}}
    <sb.Option @value={{foo}}>{{foo.name}}</sb.Option>
  {{/each}}
</FooSelect>

...which will render...

<div class="select-box foo">
  <div class="select-box__selected-option">Foo 1</div>
  <div class="select-box__options">
    <div class="select-box__option">Foo 1</div>
    <div class="select-box__option">Foo 2</div>
    <div class="select-box__option">Foo 3</div>
  </div>
</div>

...as you can see, apart from being able to select a value - this addon does very little out of the box! It's up to you to add the layer of behaviour that you require using the API.

Docs

• List of components and their arguments
• High level overview of how it works
• Test helpers
• Troubleshooting