Fork me on GitHub
#reagent
<
2021-01-25
>
bibiki23:01:04

hi, I am trying to use reagent-forms/bind-fields with react-semantic-ui but for some reason, it is not working. I know precisely how to make it work when using plain old hiccup to build my form, but not when using ui/Form here is my code:

(defn trainer-form []
  (let [x [:div [:> ui/Form
                 [:> ui/Form.Input {:label "Firstname" :width 3 :id "firstname" :field :text}]
                 [:> ui/Form.Input {:label "Lastname" :width 3 :field :text :id :aaa}]
                 [:> ui/Form.Input {:label "IG Link" :width 3 :field :text :id :bbb}]
                 ]]]
    (fn [] [bind-fields x trainer])))

(defn my-trainer-form []
  (fn []
    [bind-fields [:div
                  [:input {:field :text :id :firstname}]
                  [:input {:field :text :id :lastname}]
                  [:input {:id :iglink :field :text}]] trainer]))
my-trainer-form works fine, but trainer-form does not. now, my understanding is that ui/Form.Input fails to do the thing that :field :text in [:input {:field :text}] in hiccup does. would anyone have an idea how to fix this? thanks

bibiki23:01:31

if I change my Form.Input to [:> Form.Field [:input {:field :text :id :firstname}]] it works fine

bibiki23:01:30

so, the solution would be to find the way to tell Form.Field to put :field :text to the input it generates. anyone had to go through this?

bibiki23:01:27

it seems to me that reagent-forms assumes hiccup data structure go to it as input, whereas cljsjs.semantic-ui-react does not return hiccup... I guess, I will have to resort to hiccup for forms