TestBug

components.select-dropdown.js

import Component from '@ember/component';
import { observer, get, set, getWithDefault } from '@ember/object';
import { later } from '@ember/runloop';

export default Component.extend({
  // Required:
  // value - the currently selected option
  // options - the available options,
  //           ['Canada', 'USA', 'Mexico']
  //           [{value: 'word-cloud', label: 'Word Cloud'}]

  // Optional:
  // disabled - boolean
  // required - boolean
  // multiple - boolean
  // name - string

  tagName: 'select',

  attributeBindings: [
    'disabled',
    'required',
    'multiple',
    'name'
  ],

  didReceiveAttrs() {
    set(this, 'noDefault', (get(this, 'value') && !get(this, 'keys')) ? false : true);
  },

  didInsertElement() {
    this.$().val(get(this, 'value') || '');
  },

  didRender() {
    this.$().val(get(this, 'value'));
    if (get(this, 'isUserRoles') && get(this, 'value') === '') {
      set(this, 'value', get(this, 'originalRole'));
    }
  },

  willDestroyElement() {
    if (get(this, 'isUserRoles')) {
      set(this, 'value', '');
    }
  },

  // For when value changes
  valueWatcher: observer('value', function() {
    let propValue = get(this, 'value');
    let elValue = this.$().val();
    if (elValue !== propValue) {
      this.$().val(propValue);
    }
  }),

  // For when element changes
  change() {
    let oldValue = get(this, 'value');
    let newValue = this.$().val();
    if (oldValue !== newValue) {
      set(this, 'value', newValue);
      if (get(this, 'changeAction')) {
        later(()=>get(this, 'changeAction')(), getWithDefault(this, 'changeDelay', 0));
      }
    }
  }

});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  dropdownOptions: ['thing', 'thing2'],
  selectedOption: null
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
{{select-dropdown options=dropdownOptions value=selectedOption}}
<br>
<br>
{{outlet}}
<br>
<br>

templates.components.select-dropdown.hbs

{{#if noDefault}}
  <option value=""></option>
{{/if}}
{{#if keys}}
  {{#each options as |option|}}
    <option value="{{get option keys.[1]}}">{{get option keys.[0]}}</option>
  {{/each}}
{{else}}
  {{#each options as |o|}}
    {{#if o.label}}
      <option value="{{o.value}}">{{o.label}}</option>
    {{else}}
      <option value="{{o}}">{{o}}</option>
    {{/if}}
  {{/each}}
{{/if}}

twiddle.json

{
  "version": "0.15.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "release",
    "ember-template-compiler": "release",
    "ember-testing": "release"
  },
  "addons": {
    "ember-data": "3.2.0"
  }
}