Fork me on GitHub
#rum
<
2018-09-03
>
stephenmhopper14:09:37

Does anyone have a working example of using radio buttons with CLJS and Rum? I’m running into some very strange behavior and I’m not sure why.

maridonkers14:09:40

Blindly responsing to the 'strange behaviour'. Had something like that some time ago. Check: http://photonsphere.org/posts-output/2018-04-10-clojurescript+react-number-inputs/

stephenmhopper14:09:59

@maridonkers Yeah, the behavior I’m seeing is basically the same: the value of the Atom backing the radio button is changing just fine, but the browser isn’t updating the radio button. I’m already calling :value (str value), but I must be missing something else

maridonkers15:09:52

Weird... Can only suggest to check for differences with the Rum example code for a.o. check boxes. https://github.com/tonsky/rum/blob/gh-pages/examples/rum/examples/inputs.cljc

maridonkers15:09:11

And radio buttons.

serioga17:09:40

for me checked state of radio buttons is managed by :checked attrubute

serioga17:09:32

so code looks like

[:input {:type "radio"
               :id input-id
               :value input-id
               :checked checked
               :disabled disabled-or-readonly
               :on-change (on-change-radio state field-id)}]

stephenmhopper00:09:42

@maridonkers and @serioga Thanks for the pointers, but I still haven’t been able to figure out what’s going wrong. Basically, it seems like the radio group will select an initial value but then the browser won’t allow the HTML to change away from that value. The atom holding the value updates just fine though:

(rum/defcs form-radio-button-field < rum/reactive
                                     {:init (fn [local-state props]
                                              (let []
                                                (assoc local-state :radio-group-name (string/replace (str (random-uuid)) "-" "_"))))}
  [local-state value-atom value-options]
  (let [radio-group-name (:radio-group-name local-state)
        current-value (rum/react value-atom)
        value-set (set (map first value-options))]
    (when-not (contains? value-set current-value)
      (println "resetting...")
      (reset! value-atom (ffirst value-options)))
    [:div
     (for [[value display-value] value-options]
       (let [id (str radio-group-name "_" value)
             _ (println "id: " id)
             _ (println "name: " radio-group-name)]
         [:div {:class "radio" :key (str value)}
          [:label {:for id}
           [:input {:type     "radio"
                    :key (str value)
                    :checked  (= value (rum/react value-atom))
                    :name radio-group-name
                    :value (str value)
                    :id id
                    :on-click (utils/handle-event
                                (fn [ev]
                                  (when-let [new-value (get-event-value ev)]
                                    (println (str "new-value: " new-value))
                                    (println (str "(= " current-value " " value ") " (= current-value value)))
                                    (reset! value-atom new-value))))
                    }]
           (str "(= " current-value " " value ") " (= current-value value))
           ]]))]))

stephenmhopper14:09:59

@maridonkers Yeah, the behavior I’m seeing is basically the same: the value of the Atom backing the radio button is changing just fine, but the browser isn’t updating the radio button. I’m already calling :value (str value), but I must be missing something else

stephenmhopper00:09:42

@maridonkers and @serioga Thanks for the pointers, but I still haven’t been able to figure out what’s going wrong. Basically, it seems like the radio group will select an initial value but then the browser won’t allow the HTML to change away from that value. The atom holding the value updates just fine though:

(rum/defcs form-radio-button-field < rum/reactive
                                     {:init (fn [local-state props]
                                              (let []
                                                (assoc local-state :radio-group-name (string/replace (str (random-uuid)) "-" "_"))))}
  [local-state value-atom value-options]
  (let [radio-group-name (:radio-group-name local-state)
        current-value (rum/react value-atom)
        value-set (set (map first value-options))]
    (when-not (contains? value-set current-value)
      (println "resetting...")
      (reset! value-atom (ffirst value-options)))
    [:div
     (for [[value display-value] value-options]
       (let [id (str radio-group-name "_" value)
             _ (println "id: " id)
             _ (println "name: " radio-group-name)]
         [:div {:class "radio" :key (str value)}
          [:label {:for id}
           [:input {:type     "radio"
                    :key (str value)
                    :checked  (= value (rum/react value-atom))
                    :name radio-group-name
                    :value (str value)
                    :id id
                    :on-click (utils/handle-event
                                (fn [ev]
                                  (when-let [new-value (get-event-value ev)]
                                    (println (str "new-value: " new-value))
                                    (println (str "(= " current-value " " value ") " (= current-value value)))
                                    (reset! value-atom new-value))))
                    }]
           (str "(= " current-value " " value ") " (= current-value value))
           ]]))]))