Ember Power Select with Custom Search

components.custom-select-menu-options.js

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    removeGroup(option) {
      Ember.set(option, 'isRemoved', !Ember.get(option, 'isRemoved'));
    }
  }
});

components.power-select-search.js

import Ember from 'ember';

export default Ember.Component.extend({
});

controllers.application.js

import Ember from 'ember';
//import Controller from '@ember/controller';
//import EmberObject from '@ember/object';

let groupsArray = [{
  name: 'Production',
  numberOfOrigins: 1,
  removeableGroup: false,
  isRemoved: false
}, {
  name: 'Group A',
  numberOfOrigins: 4,
  removeableGroup: false,
  isRemoved: false
}, {
  name: 'Group B',
  numberOfOrigins: 0,
  removeableGroup: true,
  isRemoved: false
}, {
  name: 'Group C',
  numberOfOrigins: 0,
  removeableGroup: true,
  isRemoved: false
}].map(function(group) {
  return Ember.Object.create(group);
});

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  groups: groupsArray,
  actions: {
    createGroup(groupName) {
      let newGroup = { name: groupName, numberOfOrigins: 0, removeableGroup: true, isRemoved: false };
      this.get('groups').pushObject(newGroup);
      this.set('selectedGroup', newGroup);
    },
    createOnEnter() {
      console.log('test');
    }
  }
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
<br>
<br>
<link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">

{{#power-select
    options=groups
    renderInPlace=true
    selected=selectedGroup
    searchField="name"
    onkeydown=(action "createOnEnter")
    searchPlaceholder="Search for groups"
    onchange=(action (mut selectedGroup))
    beforeOptionsComponent=(component "power-select-search")
    optionsComponent=(component "custom-select-menu-options")     as |group|}}
    {{group.name}}
    {{else}}
    <div class="custom-select-menu-options">
      <ul class="select-menu-list _pls _mb0">
        <li class="ember-power-select-option list-item-row" onclick={{action "createGroup"}}>Create</li>
      </ul>
    </div>
  {{/power-select}}

templates.components.custom-select-menu-options.hbs

<div class="custom-select-menu-options">
  <ul class="select-menu-list _pls _mb0">
    {{#each select.options as |option|}}
      {{#unless option.isRemoved}}
        <li
          class="ember-power-select-option list-item-row"
          data-test-hook="vz-custom-select-menu-option"
          aria-selected="{{ember-power-select-is-selected option select.selected}}"
          aria-disabled={{ember-power-select-true-string-if-present option.disabled}}
          aria-current="{{eq option select.highlighted}}"
          data-option-index="{{optionIndex}}{{index}}"
          onclick={{action select.actions.choose option}}
          role="option">
          {{option.name}}
          <small>{{option.numberOfOrigins}} Origin(s)</small>
        </li>
        {{#if option.removeableGroup}}
        <span>
          <button type="button" class="btn btn-link btn-icon text-danger" onclick={{action "removeGroup" option}}>
            <span class="lnr-cross"></span>
          </button>
        </span>
        {{/if}}
      {{/unless}}
    {{/each}}
  </ul>
</div>

templates.components.power-select-search.hbs

<div class="ember-power-select-search search-pane _m0">
  <span class="lnr-magnifier {{unless select.searchText "placeholder"}}" aria-hidden="true"></span>
  <input type="search" autocomplete="off"
    autocorrect="off" autocapitalize="off"
    spellcheck="false" role="combobox"
    class="ember-power-select-search-input"
    value={{select.searchText}}
    aria-controls={{listboxId}}
    placeholder={{searchPlaceholder}}
    oninput={{onInput}}
    onblur={{onBlur}}>
</div>

tests.helpers.destroy-app.js

import Ember from 'ember';

export default function destroyApp(application) {
  Ember.run(application, 'destroy');
}

tests.helpers.resolver.js

import Resolver from '../../resolver';
import config from '../../config/environment';

const resolver = Resolver.create();

resolver.namespace = {
  modulePrefix: config.modulePrefix,
  podModulePrefix: config.podModulePrefix
};

export default resolver;

tests.helpers.start-app.js

import Ember from 'ember';
import Application from '../../app';
import config from '../../config/environment';

const { run } = Ember;
const assign = Ember.assign || Ember.merge;

export default function startApp(attrs) {
  let application;

  let attributes = assign({rootElement: "#test-root"}, config.APP);
  attributes = assign(attributes, attrs); // use defaults, but you can override;

  run(() => {
    application = Application.create(attributes);
    application.setupForTesting();
    application.injectTestHelpers();
  });

  return application;
}

tests.test-helper.js

import resolver from './helpers/resolver';
import {
  setResolver
} from 'ember-qunit';

setResolver(resolver);

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",
    "ember-power-select": "1.9.5",
    "ember-power-select-with-create": "0.5.0"
  }
}