Fork me on GitHub
#reagent
<
2022-07-21
>
Lycheese12:07:19

Is there a way to implement global keyboard controls in a reagent SPA? E.g. focusing a specific input on pressing A while not having changed focus after loading the page and then being able to write in it.

p-himik13:07:30

Assuming I understand you correctly, you can do it via (.addEventListener document "keypress" ...).

Lycheese13:07:33

You did yes. Thank you very much. Just need to figure out how to stop it from typing the shortcut into the input field now.

p-himik13:07:39

For that, in the event listener find the currently focused element. If that's an element that supports keyboard input, just propagate the event further (i.e. don't call .preventDefault and .stopPropagation).

Lycheese13:07:03

Is there a good catch-all for keyboard input support or do I need to check the tag names and contentEditable separately?

p-himik13:07:26

I'd doing the latter myself. :) Couldn't find a any catch-all. But also makes sense given that any other component can also listen to keyboard events - it's up to you to figure out what you want to be done in each particular case.

Lycheese13:07:40

Sounds sensible enough. :) I managed to not trigger the focus change when in a different input field but I'm still unsure how to stop it from typing my shortcut into the field after focusing it. Is there a way to "swallow" that input?

Lycheese13:07:49

Ah. preventDefault did it

Lycheese13:07:17

Thank you very much for your help^^

👍 1