Ember Octane on 'keyup' or 'keydown' is not firing

Question

I have a glimmer Component in an Ember Octane app like this

import Component from '@glimmer/component';
import { action } from '@ember/object';


export default class TestComponent extends Component {
  @action
  handleEvent(event) {
    console.log(event);
  }
}

and in my HTML I have

<div {{on 'keyup' this.handleEvent}}></div>

but handleEvent is not firing even when changing to 'keyDown' for example. It says in the documentation

The event can be any event name, not just the click event, which makes {{on}} perfect for handling any kind of DOM event. For a list of native browser events, see the MDN documentation

But that doesn't seem to be true!

Is there an "Ember way" to handle keyboard events without installing an outer library (modifier) or should I stick with native event listeners?

Answer 1

But this does work! See here .

Just notice you need to specify tabindex="0" on the div, because elements will not fire keyup if they can not be focused.