Fork me on GitHub
#reagent
<
2017-01-09
>
rovanion18:01:44

How would you costruct a text field where pressing the enter key clears the field and sends the value of the field somewhere?

val_waeselynck18:01:12

@rovanion I guess I would do that in the :on-submit handler of the surrounding form ?

rovanion18:01:42

@val_waeselynck Hmm, I used the wrong term. I meant textarea and not textfield.

rovanion18:01:02

Right now I got this:[:textarea {:id "send" :disabled false :on-change #(reset! atom (-> % .-target .-value)) :on-key-press (fn [e] (when (= 13 (.-charCode e)) (send-chat!)))}]

val_waeselynck18:01:35

and surrounding this with a form does not work ?

rovanion18:01:14

@val_waeselynck Well pressing enter in a textarea just enters \n, it doesn't perform a submit action.

val_waeselynck18:01:26

hum yeah you're right of course

val_waeselynck18:01:59

well then is the textarea really what you want?

rovanion18:01:36

Well imagine that I bound send to ctrl-enter instead. The problem is the same: There are two event handlers that get into a race condition.

rovanion18:01:46

This is a more contained version of the code:

rovanion18:01:48

(let [a (atom "")] [:textarea {:id "send" :on-change #(reset! atom (-> % .-target .-value)) :on-key-press (fn [e] (when (= 13 (.-charCode e)) (send-chat!) (reset! a "")))}])

rovanion18:01:02

Right now :on-change happens after :on-key-press but with the old value of the field and resets the field to contain the text that was just removed in :on-key-press.

val_waeselynck18:01:45

for the record, the Slack chat into which I'm typing uses on-submit 🙂

val_waeselynck18:01:48

Something tells me that the 2 events have to happen in the same JS loop iteration

val_waeselynck18:01:02

so maybe you could use a debounce or something like that

rovanion18:01:31

I can't get the :on-submit event to fire when I press enter I'm afraid. Still, it seems logical that it would suffer the same type of issue, I still have two events.

pesterhazy21:01:02

I've had similar issues in the past and concluded that listening for charCode 13 works best