Trouble with null values from onKeyPress in React/Om

509 views
Skip to first unread message

Andrew S

unread,
Mar 4, 2015, 10:43:56 AM3/4/15
to clojur...@googlegroups.com
I seem to be having the same problem as this guy:

http://stackoverflow.com/questions/22123055/react-keyboard-event-handlers-all-null

I need some assistance how to translate this answer into clojurescript. I have an Om component (a dom/input) with this handler:

:onKeyPress #(.log js/console % "pressed: " (.-keyCode %))

The event itself is logged and everything is null when I type an Esc key, Enter key, etc. It's not clear to me how to access this synthesized information using CLJS syntax, can anyone assist?

Before logging, I tried to actually do something like this:

(when (== (.-keyCode %) 27) ;escape key ....

But since the keyCode value is always 0, that didn't work.

Andrew

Moritz Ulrich

unread,
Mar 4, 2015, 11:09:51 AM3/4/15
to Andrew S, clojur...@googlegroups.com

If you log it to the console like this, Chrome (at least) will print it
interactively and update it if something changes. React uses a pool of
event objects and invalidates (= resets everything to null) as soon as
the handler is done.

This is also problematic when putting events into a core.async channel
etc.

Your comparison should work though.

As a workaround for the printing, use `cljs.core/println' and/or just print the stuff you need.
> --
> Note that posts from new members are moderated - please be patient with your first post.
> ---
> You received this message because you are subscribed to the Google Groups "ClojureScript" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to clojurescrip...@googlegroups.com.
> To post to this group, send email to clojur...@googlegroups.com.
> Visit this group at http://groups.google.com/group/clojurescript.

--
signature.asc

Andrew S

unread,
Mar 4, 2015, 12:10:07 PM3/4/15
to clojur...@googlegroups.com
Turns out that using onKeyDown instead of onKeyPress worked. The React docs suggest they behave the same, but apparently not so (in Chrome at least).

Alan MacDougall

unread,
Mar 6, 2015, 2:12:44 PM3/6/15
to clojur...@googlegroups.com
On Wednesday, March 4, 2015 at 12:10:07 PM UTC-5, Andrew S wrote:
> Turns out that using onKeyDown instead of onKeyPress worked. The React docs suggest they behave the same, but apparently not so (in Chrome at least).

Browser keyboard handling is definitely quirky, especially if you get into cut/copy/paste events. Some things that may be relevant to your situation:

onKeyDown fires whenever a key is pressed, but in some browsers, onKeyPress only fires for keys which correspond to a text character, whether alphanumeric, symbol, or whitespace.

In OSX Chrome, if a modifier key is down, onkeypress WILL NOT occur, whether or not the key combination produces an effect. For instance, Cmd-C will cause the Copy behavior, and an oncopy event; Ctrl-C will have no effect, because it is not a valid command.

In Safari 7, if a modifier key is down, onkeypress WILL occur, even if the key combination is a valid command. Returning false from this handler will prevent the command from occurring, which is not the desired behavior.

In Firefox on OSX, the Command key has a keyCode of 224, instead of the standard 91. That one had me stumped for quite a while...
Reply all
Reply to author
Forward
0 new messages