Hey, how do you all handle keyboard-events on the document?

I really don’t want to create form-3 components just to achieve some input

and I have more than one component that needs to use the input, so I can’t really use .-onkeydown

within the component

could be like so: require [goog.events :as events] and then (events/listen js/window (.-KEYPRESS events/EventType) (fn [ev] (foo)))

@yury.solovyov it would have the same issue I think

@hkjels What exactly is the problem with the result?

I’ve tried a few different approaches. The one sketched above will have the key set for two lifecycles, so in my case the caret jumps two positions instead of one upon a single press

if I use .-onkeydown from within form-1 components, one will overwrite the other and lastly, if I use addEventListener within a form-1 it will be re-added upon every change

yielding more and more jumps for each key-press as you can imagine

hmm, I think I just realised a solution

instead of using next-tick, I’ll try with key-up

@hkjels What is your dispatch doing? Updating the state with the currently pressed key?

yeah

And you move the caret based on that state? It's a bit hard to help without more code/context

that’s exactly what’s happening 🙂

hmm.. Still double-jumps

Ok! I think a better approach would be to not move the caret based on the currently pressed key, but instead have the caret position as part of the state and compute the new caret position in your keydown event handler

That way your behavior is based on when the key event is fired rather than when the browser repaints

@hkjels ^

but then I end up with a form-3-component right

I really wanted to avoid that

or am I missing something?

Why would you need that? My thought was making a :caret-position sub that your component can use.

I realize that I really should have posted in the reagent-channel. This code is in a ui-library with mostly local state using atoms

But the code you posted has re-frame dispatches?

yeah.. I use it for everything else

using re-frame for components just doesn’t sit well with me

but it’s perfect for application-code

@hkjels have you looked at re-com? There might be some key event stuff there, I can’t remember

@danielcompton nope. I’ll do that

Yeah, the current version does it like re-com

back to the drawing-board 🙂

This is for an auto-completion/dropdown thing like the one in re-com, but I want the list to be a separate thing with it’s own keyboard events-handling

that means I can not rely on an input-element like re-com does