Overview

Overview

Selects. Almost all web applications out there have selects on one way or another. A piece of UI that allows the user to choose one option among a list of them.

Browsers always had a select tag but it is very limited. They can only display plain text, they look totally different in each browser and you can't reliably style them, so devs have built their own select components to bypass all these limitations.

Two good examples of jQuery plugins that did a great job are Selectize.js and Select2, that solve the styling issues while allowing features that the original tag can't have.

But even being two solid pieces of engineering they are fundamentally flawed when it comes to play with frontend frameworks like Ember.js. Those libraries have an imperative API designed to append a component to an otherwise existing HTML document, with HTML in mind.

In Ember apps, however, we don't think in terms of nodes, events and tags, but in terms of data, actions and templates. The translation between those two visions, even if possible (two good examples of prior art are ember-select2 and ember-cli-selectize), involves a significant amount of glue code and prevents us from taking advantage of Ember's primitives.

This project aims to build a select component that has all the features of those existing libraries but allows to you to leverage Ember's primitives.

Let's see how.