Hello. I’m doing my first form with Reagent, and I’m clearly abusing it somehow but can’t figure out how.

Here’s the code:

(defn user-property [user label property]
   (let [value (r/atom  (property @user))
         editing (r/atom false)]
     (fn []
       [:div.userproperty
        [:label label]
        [:p.user-property-value {:on-click #(reset! editing true )
                                 :style {:display (if @editing "none" "block")}
                                } @value]
        [:input.user-property-input {:value @value
                                     :on-key-down #((let [keycode (.-keyCode %)]
                                                     (if (= 13 keycode) (reset! editing false))))
                                     :on-change #(reset! value (-> % .-target .-value))
                                     :on-blur #(reset! editing false)
                                     :style  {:display (if @editing "block" "none") }}]])))

 (defn user-detail [user]
   (fn [user]
     (let [u @user]
       [:div.writerdetail
        [:div.writerheader
          [:img {:src (:avatar u)}]
          [:h1 (:first_name u) " " (:last_name u)  ]]
        [:div.writerbio
         [:fieldset
          [:legend "Personal Information"]
          [user-property user "First Name" :first_name]]]
        ])))

It works as expected - the value for “First Name” turns into an input when clicked, and I can modify the value and have it stick on the atom. However whenever the input field blurs I see this exception in the console:

Line “65” of writeradmin.cljs puts it right after the user-detail function, on a blank line.

It doesn’t seem to affect how it’s working, but it’s obviously troubling. Seems like it might have to do with event bubbling, but I’m stumped.

Correction to my question above: there was something messed up with my sourcemaps, when I restarted I see that the line

:on-key-down #((let [keycode (.-keyCode %)]
                           (if (= 13 keycode) (reset! editing false))))

@credulous you probably don't want two opening parens there. when the if returns nil it tries to call nil and you get that exception,

AHHRGG

Thank @jjfine !

np, that's probably one of those "looking at it too long" bugs where the probablem becomes invisible

With that out of the way, I have another question… I have a form that modifies an atom in a bunch of places. The inputs are components on their own because of some special behavior.

The input components are getting cursors to the property they modify. I’d like a save button to appear when the parent atom is modified. Is there a way to do that without passing a “dirty” flag to every one of the components?

In my app, we store the object that's the source of the form in the global state. The form shows the object from the global state merged with a map of any of the form fields that have been modified. So if that map isn't empty, we know the form has been edited.

@credulous lemme know if that's unclear

Interesting… I’ll try that thanks