Skip to content

Instantly share code, notes, and snippets.

Last active Apr 9, 2020
What would you like to do?
keyboard-shortcut element modifer

An element modifier to attach a keyboard shortcut to an element that has a click method

Example usage:

  <button {{action 'doSomethingCool'}} {{keyboard-shortcut "D"}}>
    [D]o something cool


  • ember-octane preview (from blueprint)
  • ember-oo-modifiers (0.2.2)
  • ember-keyboard

Note: make sure @ember-decorators/babel-transforms is present and is at ^2.1.2 for now (this is expected to be rolled into ember-cli-babel)

// app/modifiers/keyboard-shortcut.js
import Modifier from 'ember-oo-modifiers';
import { inject as service } from '@ember/service';
import { keyDown } from 'ember-keyboard';
class KeyboardShortcutModifier extends Modifier {
@service keyboard;
keyboardActivated = true
keyboardPriority = 0
didReceiveArguments([key, action]) {
this.key = key;
this.action = action;
// Note: ember-keyboard is designed to be used via its mixin, however classes don't support mixins.
// So this modifier implements `has` and `trigger` to behave like it would if EKMixin was included.
// We would love to see a a better, non-mixin way of interacting with ember-keyboard be added.
has(triggerName) {
if (triggerName === `keydown:Key${this.key}`) {
return true;
return false;
trigger(listenerName) {
if (listenerName === keyDown(`Key${this.key}`)) {;
export default Modifier.modifier(KeyboardShortcutModifier);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment