keyup Test

components.my-operator.js

import Component from '@ember/component';
import { scheduleOnce } from '@ember/runloop';
import { isEmpty } from '@ember/utils';
import { computed } from '@ember/object';

export default Component.extend({
  classNameBindings: ['isActive', ':pill-operator'],

  isActive: false,
  meta: null,
  selection: null,

  options: computed('meta', () => {
    return [
      { displayName: '=', isExpensive: false, hasValue: true },
      { displayName: '!=', isExpensive: false, hasValue: true },
      { displayName: 'exists', isExpensive: false, hasValue: false },
      { displayName: '!exists', isExpensive: false, hasValue: false }
    ]
  }),

  didUpdateAttrs() {
    this._super(...arguments);
    if (this.get('isActive')) {
      // We schedule this after render to give time for the power-select to
      // be rendered before trying to focus on it.
      scheduleOnce('afterRender', this, '_focusOnPowerSelectTrigger');
    }
  },

  actions: {
    onFocus(powerSelectAPI /* event */) {
      powerSelectAPI.actions.open();
    }
  },

  _focusOnPowerSelectTrigger() {
    const trigger = this.element.querySelector('.ember-power-select-trigger input');
    if (trigger) {
      trigger.focus();
    }
  },

  // Function that power-select uses to make an autosuggest match. This function
  // looks at the operators's displayName property for a match.
  _matcher: (o, input) => {
    const _displayName = o.displayName.toLowerCase();
    const _input = input.toLowerCase();
    return _displayName.indexOf(_input);
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  meta: {
    count: 0,
    format: 'Text',
    metaName: 'a',
    flags: 1,
    displayName: 'A'
  },
  
  keyup: () => {
    console.log('keyup');
  }
});

templates.application.hbs

<textarea cols=10 rows=10>
{{my-operator isActive=true meta=meta}}

templates.components.my-operator.hbs

{{#if isActive}}
  {{#power-select
      allowClear=false
      defaultHighlighted=undefined
      extra=(hash labelPath='displayName')
      initiallyOpened=false
      matcher=_matcher
      matchTriggerWidth=false
      noMatchesMessage='All Operators Filtered out'
      onfocus=(action 'onFocus')
      options=options
      selected=selection
      as |operator|
    }}
    {{operator.displayName}}
  {{/power-select}}
{{else}}
  {{selection.displayName}}
{{/if}}

twiddle.json

{
  "version": "0.13.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "3.0.0",
    "ember-template-compiler": "release",
    "ember-testing": "release"
  },
  "addons": {
    "ember-power-select": "1.10.4"
  }
}