Fork me on GitHub
#re-frame
<
2017-09-28
>
hkjels12:09:15

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

hkjels12:09:52

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

hkjels12:09:31

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

hkjels12:09:47

within the component

yury.solovyov13:09:08

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

hkjels15:09:47

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

curlyfry16:09:55

@hkjels What exactly is the problem with the result?

hkjels16:09:08

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

hkjels16:09:09

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

hkjels16:09:44

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

hkjels16:09:44

hmm, I think I just realised a solution

hkjels16:09:11

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

curlyfry16:09:23

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

curlyfry16:09:53

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

hkjels16:09:11

that’s exactly what’s happening 🙂

hkjels16:09:29

hmm.. Still double-jumps

curlyfry16:09:06

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

reefersleep17:09:06

Read the whole convo, this really seems like a way to go to me to, @hkjels - I think I would do it this way, too

hkjels18:09:14

I would totally agree if this was in re-frame land, but it’s more in reagent land to be honest

reefersleep18:09:11

… but you can do the same thing with reagent, no? re-frame is just structured reagent.

reefersleep18:09:59

(that could be taken as condescending to the re-frame effort, sorry about that guys 😄 But for simple code like this, the statement holds, I think. Events and subscriptions are *just* ( 😛 ) formal structure around swap!ing a r/atom and derefing the same r/atom . )

reefersleep18:09:46

Or is there something I’m missing?

curlyfry16:09:56

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

hkjels16:09:26

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

hkjels16:09:35

I really wanted to avoid that

hkjels16:09:48

or am I missing something?

curlyfry16:09:36

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

hkjels16:09:19

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

curlyfry16:09:23

But the code you posted has re-frame dispatches?

hkjels16:09:02

yeah.. I use it for everything else

hkjels16:09:26

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

hkjels16:09:44

but it’s perfect for application-code

curlyfry17:09:47

Haha, I'm confused. So the snippet is irrelevant?

hkjels17:09:42

no. That’s what I would call application-code

hkjels17:09:55

whenever one uses state outside of the component itself I guess

curlyfry17:09:27

So what is the reason that you couldn't have a :caret-position subscription?

danielcompton18:09:06

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

hkjels19:09:41

@danielcompton nope. I’ll do that

hkjels19:09:43

Yeah, the current version does it like re-com

hkjels19:09:15

back to the drawing-board 🙂

hkjels19:09:23

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

hkjels19:09:47

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