Fork me on GitHub

@shriphani: no problem πŸ˜„


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)))?


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


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


@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.


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


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

  (fn [db] (reaction (:field-value @db))))

  (fn [db _]
    (update db :field-value inc)))

  (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)])}])))


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


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


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


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?


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


@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.


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


I tried this one but it doesn't work either


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


@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)))}


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


i guess you could check for a nil el as well


it works for me as well


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


that's my guess


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


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


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


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


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


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


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


Carret πŸ˜„


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: but the complaint persists - any ideas?


@shriphani: Can you post the error message too?


sure one sec.


@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.


Whoops missed one definition that I think was important too


@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.


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.


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.


antiforgery ruined my hackaton once


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


still fun


That's awesome