ember-power-select-typeahead with allowClear

trigger.hbs

<input type="search"
  value={{text}}
  id="ember-power-select-typeahead-input-{{select.uniqueId}}"
  class="ember-power-select-typeahead-input ember-power-select-search-input"
  autocomplete="off"
  placeholder={{placeholder}}
  oninput={{onInput}}
  onfocus={{onFocus}}
  onblur={{onBlur}}
  onkeydown={{action "handleKeydown"}}
  onmousedown={{action "stopPropagation"}}>
{{#if canClear}}
    <span class="ember-power-select-clear-btn" onmousedown={{action "clear"}} ontouchstart={{action "clear"}}>&times;</span>
{{/if}}
{{#if select.loading}}
  <span class="ember-power-select-typeahead-loading-indicator"></span>
{{/if}}

trigger.js

import Ember from 'ember';
import EmberPowerSelectTypeaheadTrigger from 'ember-power-select-typeahead/components/power-select-typeahead/trigger';

export default EmberPowerSelectTypeaheadTrigger.extend({

  canClear: Ember.computed('select.searchText', 'select.disabled', 'allowClear', function() {
    return !Ember.isEmpty(this.get('select.searchText')) && !this.get('select.disabled') && this.get('allowClear');
  }),

  actions: {
    clear(e) {
      e.stopPropagation();
      let input = document.querySelector(`#ember-power-select-typeahead-input-${this.get('select').uniqueId}`);
      input.value = '';
      this.get('select').actions.search('');
      this.get('select').actions.close(this.get('select'), e);
      if (e.type === 'touchstart') {
        return false;
      }
    }
  }
});