This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2022-10-12
Channels
- # announcements (13)
- # aws (18)
- # babashka (60)
- # babashka-sci-dev (83)
- # beginners (32)
- # biff (18)
- # calva (22)
- # cider (8)
- # clj-on-windows (101)
- # clojure (59)
- # clojure-bay-area (2)
- # clojure-europe (36)
- # clojure-india (4)
- # clojure-nl (3)
- # clojure-norway (5)
- # clojure-spec (4)
- # clojure-uk (1)
- # clojurescript (5)
- # conjure (1)
- # core-async (10)
- # cursive (7)
- # data-science (5)
- # datahike (10)
- # datalog (11)
- # datomic (3)
- # docker (3)
- # figwheel-main (2)
- # gratitude (3)
- # improve-getting-started (1)
- # introduce-yourself (5)
- # jobs (3)
- # joyride (12)
- # leiningen (1)
- # lsp (67)
- # malli (27)
- # off-topic (36)
- # random (1)
- # rdf (1)
- # re-frame (17)
- # reagent (21)
- # reitit (4)
- # releases (4)
- # remote-jobs (2)
- # ring (2)
- # sci (35)
- # shadow-cljs (28)
- # sql (3)
- # squint (9)
- # tools-deps (11)
Hi everybody,
I'm currently writing a re-frame app following https://github.com/danownsthisspace/re-frame-form-example/blob/master/src/animal_form/events.cljs tutorial and I have a problem I just can't wrap my head around.
I have an on-change event handler on an input field and even though the event is fired, there is a problem in the event handler:
(re-frame/reg-event-db
::update-form
(fn [db [_ id val]]
(assoc-in db [:form id] val))
After loading the page, the first on-change event somehow triggers initialize-db (something I actually already do in the init function)
(defn ^:export init []
(re-frame/dispatch-sync [::events/initialize-db]
...
Initialize-db is executed on load, but for some reason it shows under fx/coeffects in 10x after the first on-change-event. This does not happen in the tutorial app.
The new value input value is then associated with whatever "db" points at in the handler, but the actual db is not updated. After that, all subsequent value changes are always "one off". The state in the db is always one keystroke behind the actual value.
The same code works in the tutorial for me. I went through all involved files, but I can't find anything that would explain this issue. Does anybody have an idea?
I'm using 10x. Also updated the description a bit.
So your code is different from the tutorial, it's just that you think that none of those differences should affect the behavior? If so, are the dependencies' versions also different?
Yes, my deps have a slightly higher version..
There's this issue, might be related: https://github.com/day8/re-frame-10x/issues/268
Ooh.. that actually sounds like an explanation! So it would be the debug library causing the issue? However I just rolled back re-frame 10x to 1.0.2 and cleared all build files and the issue still persists.
It's also not "just" a 10x issue, if I log the current state of the DB to the console, it's also 1 off.
Thanks anyway 🙂
It seems to be related to the fact that the component together with it's two-way binding (on-change-event and subscription for the value) is called from a parametrized function in another namespace.. if I replace the function call with its return value it works.
In my markup I'm calling a function for rendering text items like this:
(comp/item-text {:label (s/get-label s/schema-user :name)} :name)
the function is in another namespace and looks like this:
(defn item-text [props id]
(let [value (re-frame/subscribe [::subs/form id])]
[:div.field {:key id}
[:label.label (-> props :label)]
[:div.control
[:input.input {:value @value
:type "text" :placeholder "Text input"
:on-change #(re-frame/dispatch [::events/update-form id (-> % .-target .-value)])}]]])
If I replace the function call with the functions' body it works.
Ah.. wasn't there something something about lazy evaluation...?