I've got a re-com question. Let's say I've got an input-text and a button, how do I make hitting enter when the input-text is active trigger the button's on-click? Looking through the recom demo for modal popup has a similar example: https://github.com/Day8/re-com/blob/bf0107cedab51fa5a1789c4035aeebb9ba2edd8e/src/re_demo/modal_panel.cljs#L88, but it appears to just only trigger the first button child.

In plain reagent I'd use:

[:form {:on-submit (fn [e] (.preventDefault e))}
 [input-box-thing]
 [:button.cancel ,,,] ;;<-- don't click this on enter from input-box-thing
 [:button.submitme {:type "submit",,,}]]

Could you make the on-blur for the input to the same dispatch as the button's click handler?

Code like this has worked for me:

[re-com/input-text
 :model some-text
 :on-change #(reset! some-text %)
 :attr {:auto-focus   true
        :on-focus     (handler-fn (-> event .-target .select))
        :on-key-press (handler-fn (case (.-which event)
                                    13 (submit-form)
                                    nil))}]

You could also add a 27 in the case function to handle the Esc key being pressed and run your cancel code/dispatch

it is a pleasure to work with re-com guys, thanks, and the last figwheel does not even fully reload the page!

Thanks @richiardiandrea. Do you want to expand on your figwheel comment?

Thanks gregg and mikethompson , that works great

@gregg

Before it was reloading the whole page at every change

version 0.4.1, now with version 0.5.0 it just reloads the changed components, or in any case, it is way ffaster, dunno what exactly Bruce has done 😄

or you guys, I also switched to alpha2 my web app

We're using figwheel "0.5.0-1" and it seems to be fine.

Presumably if you take figwheel back to 0.4.1 it starts reloading as you expect again?

actually gregg, what does event in your code snippet up there mean?

as in: ,,,:on-focus (handler-fn (-> event .-target .select)),,,

That is just like % in event handlers, except it comes from our handler-fn macro

Here is the code, it should explain it better: https://github.com/Day8/re-com/blob/master/src/re_com/core.clj#L43

Ahh, never seen that before, thanks.

There's a nice long explanation about why we created handler-fn in that file, but basically it guarantees that handler functions return nil as per React requirements