Dropdown Component

components.drop-down.js

import Ember from 'ember';

export default Ember.Component.extend({
  options: null,
  isActive: false,
  activeOption: '',
  
  isTouchScreenDevice: Ember.computed(function() {
    return navigator.maxTouchPoints || 'ontouchstart' in document.documentElement; 
  }),
  
  mappedOptions: Ember.computed('options', 'activeOption', function() {
    const options = this.get('options').sort((a, b) => {
        const labelA = a.label.toUpperCase();
        const labelB = b.label.toUpperCase();

        let comparison = 0;
        if (labelA > labelB) {
            comparison = 1;
        } else if (labelA < labelB) {
            comparison = -1;
        }
        return comparison;
    });
    const activeOption = this.get('activeOption');
    
    if (options == null) return null;
    return options.map((option) => {
      const optionIsActive = option.label == activeOption;
      const className = optionIsActive ? 'activeOption' : 'inactiveOption';
      return { label: option.label, className };
    }).sort();
  }),
  
  filteredOptions: Ember.computed('mappedOptions', 'activeOption', function() {
    const options = this.get('mappedOptions');
    const lowerActiveOption = this.get('activeOption').toLowerCase();
    return options.filter((opt) => {
      const label = opt.label.toLowerCase();
      return label.includes(lowerActiveOption);
    });    
  }),
  
  actions: {
  	setActiveOption (event) {
      const selectedValue = event.target.getAttribute('data-optionValue');
      this.set('activeOption', selectedValue);
      this.set('isActive', false);
    },
    openDropDown () {
      this.set('isActive', true);
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  dogs: ['Golden Retriever', 'Labrador', 'Siberian Husky', 'Kelpie', 'Border Collie', 'German Shepherd', 'Beagle', 'Corgi', 'Greyhound'],
  
  dropDownOptions: Ember.computed('dogs', function() {
    const dogs = this.get('dogs');
    return dogs.map((dog) => {
      const isActive = true;
      return { label: dog, isActive };
    });
  })
});

styles.app.css

@import url('https://fonts.googleapis.com/css?family=Questrial');

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.kit {
  height: 36px;
  line-height: 36px;
  vertical-align: middle;
  display: inline-block;
  border: none;
  border-radius: 2px;
  background: transparent;
  font-family: 'Questrial', sans-serif;
  font-size: 14px;
  box-sizing: border-box;
  position: relative;
}

.currentOption {
  border: none;
  outline: none;
  height: 36px;
  border-bottom: 2px solid #209f85;
  border-radius: 0;
  width: 100%;
  position: relative;
}

.currentOption:after {
  content: '\25BE';
}

.semanticSelect {
  width: 80%;
  margin-left: 10%;
  border-radius: 0;
  -webkit-appearance: none;
  padding: 0 5px;
}

.active.selectBoxOptions {
  visibility: visible;
  border: 1px solid #f7f9f7;
  max-height: calc(4.5 * 36px);
  overflow: scroll;
  background-color: #fff;
}

.selectBoxOptions {
  visibility: hidden; 
}

.option {
 	padding: 0 10px;
  height: 36px;
  line-height: 36px;
}

.option:hover {
 	color: #209f85;
  background-color: #f7f9f7;
}

.label {
  color: #BCC3C6;
  padding: 0 5px;
}

.icon {
  position: absolute;
  right: 10px;
}

.activeOption {
  color: #BCC3C6;
}

.activeOption:hover {
 	color: #BCC3C6;
  background-color: #fff;
}

templates.application.hbs

{{drop-down options=dropDownOptions label="Dogs"}}

templates.components.drop-down.hbs

{{#if isTouchScreenDevice}}
	<select class="semanticSelect kit selectDropDown">
    <option value="all" selected>{{label}}</option>
    {{#each options as |option|}}
      <option value={{option.label}}>{{option.label}}</option>
    {{/each}}
  </select>
  
{{else}}
	<div class="kit selectDropDown">
  	{{input placeholder=label
    		value=activeOption
    		class="currentOption"
    		focusIn=(action 'openDropDown')
    		onUpdate=activeOption}}

    <div class="selectBoxOptions {{if isActive 'active' ''}}">
      {{#each filteredOptions as |option|}}
        <div class="option"
              data-optionValue={{option.label}}
              onClick={{action 'setActiveOption'}}
              class={{option.className}}>
          {{option.label}}
        </div>
      {{/each}}
    </div>
   </div>
{{/if}}

twiddle.json

{
  "version": "0.13.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.16.2",
    "ember-template-compiler": "2.16.2",
    "ember-testing": "2.16.2"
  },
  "addons": {
    "ember-data": "2.16.3"
  }
}