power-select mouse bug

components.custom-trigger\.js

import TriggerComponent from 'ember-power-select/components/power-select-multiple/trigger';

const isTouchDevice = !!window && 'ontouchstart' in window;

export default TriggerComponent.extend({
  layoutName: 'components/trigger',

  didInsertElement() {
    let select = this.get('select');
    this.input = document.getElementById(`ember-power-select-trigger-multiple-input-${select.uniqueId}`);
    let inputStyle = this.input ? window.getComputedStyle(this.input) : null;
    this.inputFont = inputStyle ? `${ inputStyle.fontStyle } ${  inputStyle.fontVariant} ${ inputStyle.fontWeight } ${ inputStyle.fontSize}/${ inputStyle.lineHeight } ${ inputStyle.fontFamily }` : null;
    let optionsList = document.getElementById(`ember-power-select-multiple-options-${select.uniqueId}`);
    let stop = e => {
      let selectedIndex = e.target.getAttribute('data-selected-index');
      if (selectedIndex) {
        e.stopPropagation();
        e.preventDefault();
      }
    };
    let chooseOption = (e) => {
      let selectedIndex = e.target.getAttribute('data-selected-index');
      if (selectedIndex) {
        e.stopPropagation();
        e.preventDefault();

        let select = this.get('select');
        let object = this.selectedObject(select.selected, selectedIndex);
        select.actions.choose(object);
      }
    };
    if (isTouchDevice) {
      optionsList.addEventListener('touchstart', stop);
      optionsList.addEventListener('touchend', chooseOption);
    }
    optionsList.addEventListener('mousedown', stop);
    optionsList.addEventListener('mouseup', chooseOption);
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  init() {
    this._super();
    this.catalog = [
      'Reese\'s pieces',
      'Blow Pops',
      'Almond Joy',
      'M&Ms',
      'Snickers',
      'Mr. Goodbar'
    ];
    this.selected = [
      'Reese\'s pieces',
      'Blow Pops'
    ];
    this.events = [];
  },

  workaround: true,
  
  actions: {
    registerChange(values = []) {
      this.get('events').pushObject(`Power Select changed [${values.join()}]`);
      this.set('selected', values);
    }
  }
});

templates.application.hbs

<div id="container">
<div id="ember-basic-dropdown-wormhole"></div>

<p>A workaround for <a href="https://github.com/cibernox/ember-power-select/issues/924" target="_blank">cibernox/ember-power-select#924</a></p>

<p>
<label>{{input type="checkbox" name="isAdmin" checked=workaround}} Enable workaround</label>
</p>

<ul style="float: right;">
  {{#each events as |event|}}
    <li>{{event}}</li>
  {{/each}}
</ul>

<div style="width: 200px;">
	{{#if workaround}}
    {{#power-select-multiple
        closeOnSelect=false
        options=catalog
        selected=selected
        onchange=(action "registerChange")
        triggerComponent="custom-trigger"
        as |option|}}
      {{option}}
    {{/power-select-multiple}}
  {{else}}
    {{#power-select-multiple
        closeOnSelect=false
        options=catalog
        selected=selected
        onchange=(action "registerChange")
        as |option|}}
      {{option}}
    {{/power-select-multiple}}
  {{/if}}
</div>

<ul>
  {{#each selected as |candy|}}
    <li>{{candy}}</li>
  {{else}}
    <li>No candy selected</li>
  {{/each}}
</ul>
</div>

twiddle.json

{
  "version": "0.17.0",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "2.18.2",
    "ember-template-compiler": "2.18.2",
    "ember-testing": "2.18.2"
  },
  "addons": {
    "@glimmer/component": "1.0.0",
    "ember-power-select": "2.3.5"
  }
}