I want key modifiers for keyboard events.

[NakajimaTakuya]

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?

[marcoroth]

Hey @NakajimaTakuya

I think the library stimulus-hotkeys is exactly what you are looking for. Check out the library here: https://www.npmjs.com/package/stimulus-hotkeys

[NakajimaTakuya]

@marcoroth
Thanks, I'll look into using that.

[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?

[leastbad]

@NakajimaTakuya I appreciate you spending some time going through stimulus-hotkeys, even if you make it sound like it was written by an alien. 😉

All libraries are opinionated. While it's true that my opinions and your opinions may differ for legitimate reasons, it's also possible that I have thought about this problem longer than most people. For example, this isn't even my only Stimulus-based hotkeys library: https://github.com/leastbad/stimulus-shortcut

The main reason Stimulus Hotkeys works the way that it does is because it affords complete flexibility and dynamism: you can push an update to the key bindings from the server and it will take effect immediately.

Stimulus Hotkeys doesn't "control" events, but it does launch methods on controllers. That's an important distinction. data-action is one of several legitimate ways to launch methods on controllers, but it's never been the only way. Libraries frequently introduce new syntax idioms, and that's what's happening here.

This is a powerful tool and it might be too much for what you're trying to do. Feel free to borrow as much of my code as you can, because you will save yourself a lot of time and learn Stimulus better in the process.

[NakajimaTakuya]

@leastbad Thanks for the reply.
I respect your opinion as well.
I frankly respect the fact that you have been dealing with this issue for many years.

The library you suggested does indeed work and seems to meet the requirements.
However, I thought it would be more uniform and refined if it were officially integrated into data-action, if many people, like me, wanted such a feature.
Of course, that is not my intention to deny the library.

Maybe my first message seemed a bit urgent.
But really, it wasn't that way, I wrote it in the hope that stimulus will provide such a feature in the future someday.

I will try to submit my expected behavior as PR for more specific discussion.
Perhaps I will learn more about the ins and outs of event handling there.

I am fortunate to have heard your views.

[leastbad]

Let me know if you have any questions whatsoever, friend.

One other path that you might investigate is the hotkeys support build into the stimulus-use library:

https://stimulus-use.github.io/stimulus-use/#/use-hotkeys

I think this is a really slick implementation that will serve many use cases.

[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 :)