A minimalistic ClojureScript interface to React.js
quadron 2020-08-08T22:35:15.150700Z

I have the following reagent component. if i remove the random-uuid i get warnings and if i add them, the input field loses focus after entering a single character! what is going on here? can somebody please help me?

(defn input-fields
    [:p (str "content of states: " @state)]
    [:p "fuck you"]]
    (for [id (range 5)]
      [:div #_{:key (random-uuid)}
       [:input {
                :type :text
                :value #_(:foo @state)
                (sp/select-one [sp/ATOM :input sp/ALL #(= (:id %) id) :attribute] state)
                :on-change (fn [e]
                             (sp/transform [sp/ATOM :input sp/ALL #(= (:id %) id)]
                                           (fn[x] (assoc x :attribute (-> e .-target .-value))) state))}]
       [:input {
                :type :text
                :value #_(:foo @state)
                (sp/select-one [sp/ATOM :input sp/ALL #(= (:id %) id) :value] state)
                :on-change (fn [e]
                             (sp/transform [sp/ATOM :input sp/ALL #(= (:id %) id)]
                                           (fn[x] (assoc x :value (-> e .-target .-value))) state))}]]))
   [:input {
            :type :button
            :value :submit
            :on-click (fn [e]
                        (println "submit placeholder"))}]])

phronmophobic 2020-08-08T22:46:39.150800Z

:key should be a stable value with respect to its contents. try using something like {:key id}

phronmophobic 2020-08-08T22:47:46.151200Z

I can't remember if key is required to be a string. you might need {:key (str id)}

lilactown 2020-08-08T22:52:15.151400Z

numbers should be fine as keys

quadron 2020-08-08T22:55:12.151700Z

changing it to a number solved the problem. thanks guys.

quadron 2020-08-08T22:56:46.151900Z

was the key changing after each diff?

lilactown 2020-08-08T22:57:07.152100Z

yes, (random-uuid) gets run every render so it will produce a new uuid

lilactown 2020-08-08T22:57:32.152600Z

so it was telling React to blow out whatever DOM element it had created for your :input and create a new one, resetting the cursor position

quadron 2020-08-08T22:57:48.152800Z

i see. makes sense

phronmophobic 2020-08-08T22:58:18.153Z

see for the "official" explanation

phronmophobic 2020-08-08T23:00:07.153600Z

reusing dom nodes is good for performance and it's required for state that's only represented in the dom (like focus and cursor position)