I want key modifiers for keyboard events.

There are many times when we want to support keyboard operations as part of accessibility.

In such cases, you may want to include a filtering process in your code so that it only works with certain keys, as shown below.

moveTab(evt) {
  switch(evt.key) {
    case 'ArrowLeft':
      ....
    case 'ArrowRight':
      ...
  }
}

This is redundant and can easily lead to deviations from the function name. (It is tempting to disobey the teachings of Stimulus and name the function onKeydown().)

In particular, ArrowDown/ArrowUp/ArrowLeft/ArrowRight/Enter/Space/Escape/Home/End are frequently used keys.

I think it would be ideal if we could use data-action="keydown.left->tabs#switchLeft" like in some libraries. Is there any consideration to implement such a modifier?

[NakajimaTakuya]

stimulus-hotkeys is a really great experiment! However, if I’m being honest, I’d like to see official support for it. The 3rd party library requires a set of element selector and controller names as information, which makes the specification redundant, and it lacks the concept of scope of stimulus actions. And the fact that there are two ways to control events, data-action and data-hotkeys... is also complicated. I think this is unavoidable since it is a 3rd party library. Is there still room for discussion?

[NakajimaTakuya]

Thank you, I am very happy to know the different approaches. The stimulus-use implementation looks very simple, although not declarative (from the HTML side). I’ll consider hiring these if PR is not accepted 😃