Fork me on GitHub
#reagent
<
2016-01-29
>
amonks00:01:33

@shriphani: no problem ๐Ÿ˜„

mbertheau10:01:30

Does reaction notice ratom derefs in a function that's called in the reaction form? I.e. (def f [] (:foobar @db)) (def reactive-f (reaction (f))) - is reactive-f updated if the db ratom changes? Or do I have to write (def reactive-f (reaction (:foobar @db)))?

yenda10:01:34

I'm trying to make an event mouse-down that doesn't loose the focus (i.e when I click on the element the focus stays where it is), but this previous snippet is not enough

yenda10:01:48

Any idea of what would be needed to make it work ?

sashton15:01:07

@yenda: I'm not sure if it's the case for you, but I had the scenario once where i wasn't careful enough in my react keys and re-rendering of components, so when I dispatched an event, it updated the model, which re-rendered my component by removing the DOM element (text box in my case) and creating a new one. I that case, the focus was lost.

yenda15:01:27

mhm maybe right that must be the reason I lose the focus, I do have keys but I am changing the content of an input field that has focus so it probably does rerendering

sashton16:01:48

it is possible, however, to update an input field without the focus changing:

(frame/register-sub
  :field-value
  (fn [db] (reaction (:field-value @db))))

(frame/register-handler
  :inc-field
  (fn [db _]
    (update db :field-value inc)))

(frame/register-handler
  :update-field
  (fn [db [_ v]]
    (assoc db :field-value v)))

(defn main-panel []
  (let [data (frame/subscribe [:field-value])]
    (fn []
      [:input {:type          "text"
               :on-mouse-down #(frame/dispatch [:inc-field])
               :value         (or @data 0)
               :on-change     #(frame/dispatch [:update-field (-> % .-target .-value int)])}])))

yenda18:01:06

@sashton: but your mouse-down is on the element that changes

yenda18:01:23

mine is on a different element it inserts the value of the element you click where your pointer has focus, but after that it loses the focus

sashton18:01:09

do you mean the following is happening: - element 1 has focus - click element 2, event updates data for element 1 - element 2 gets focus

kamn18:01:59

I have not used React.js without a wrapper(om/reagent) but is it fair to say Reagent is more concise than pure JS react with jsx?

yenda18:01:00

sashton: yes except that element2 is just some text so the focus is lost

sashton18:01:56

@yenda: hmm, not sure about that then. it seems like that's just the standard behavior of the browser. maybe you could call (.focus elem) after you click.

sashton18:01:42

using a form-3 component to get access to the DOM element

yenda18:01:26

I tried this one but it doesn't work either

yenda18:01:23

@sashton: do you mean using :compoment-did-update ?

sashton19:01:38

@yenda: I had mentioned form-3 in order to get a handle on the dom element, but .-activeElement works also. Putting that focus call in a timeout makes it work:

{:on-mouse-down (fn [e]
                               (let [el (.-activeElement js/document)]
                                 (frame/dispatch [:inc-field])
                                 (js/setTimeout #(.focus el) 10)))}

sashton19:01:11

I'm not sure if this is a "best practice", but it works in my sample code

sashton19:01:42

i guess you could check for a nil el as well

yenda19:01:51

it works for me as well

yenda19:01:11

so I assume the timeout is because it takes some time for the unfocus event to propagate ?

sashton19:01:25

that's my guess

sashton19:01:55

i just got the idea from some google searching, it seems in jQuery land that's how people are doing the same thing

yenda19:01:09

another solution would be to do something with app-state and reactions

yenda19:01:32

but I find it odd I'm surprised there is no convenient way to block the events

yenda19:01:58

there is probably something wrong because now I seek mutability to be able to set the carret position where it should be ๐Ÿ˜„

sashton19:01:14

yeah, like i said, i'm not sure if it's a best practice. however, i don't know if storing dom focus in the app state is typical either. it seems more like local state. but i guess it depends on the app. it seems like it could get complicated if every change of focus had to update the app state

yenda20:01:34

My problem space is similar to a text editor that would allow the user to insert special symbols in a input area without loosing the focus and career position to carry on typing

lucien.knechtli20:01:52

career position? so... lose focus and get fired? ๐Ÿ˜›

yenda20:01:47

Carret ๐Ÿ˜„

shriphani22:01:05

Hi guys I have a few issues with my reagent setup. Thereโ€™s a POST endpoint which complains about the CSRF token. I have set anti-forgery to false using: https://www.refheap.com/114239 but the complaint persists - any ideas?

shaun-mahood22:01:17

@shriphani: Can you post the error message too?

shriphani22:01:26

sure one sec.

shaun-mahood22:01:44

@shriphani: My bet would be that it's the route definition on the endpoint that's the problem, not your CLJS - I had a lot of trouble getting it to work and tried a lot of different things. Here's what I ended up with, pretty sure there's some overlap between some of the stuff and not sure how good it is, but maybe something in there will help you get rid of your error. https://www.refheap.com/114241

shaun-mahood22:01:39

Whoops missed one definition that I think was important too https://www.refheap.com/114242

shriphani22:01:03

@shaun-mahood: I got it to work. So the reagent template drops a middleware.clj in end/dev/clj/proj_name where it wraps your app up in all sorts of stuff - placing the forgery bits there caused ring to pick things up.

shaun-mahood22:01:48

Oh cool - I didn't realize the reagent template had a Clojure component. Anti-forgery can be such a pain when you just expect things to work.

shriphani22:01:07

yea this is a tiny internal tool so I was losing my shit when it started taking too long. anyway thanks for the help -really appreciate it.

yenda22:01:19

antiforgery ruined my hackaton once

yenda22:01:05

well I was only into clojure for a few weeks it was a bold move ๐Ÿ˜„

yenda22:01:08

still fun

shaun-mahood22:01:45

That's awesome