Fork me on GitHub
#reagent
<
2018-01-26
>
gadfly36100:01:15

@eveko Make sure you are putting the on-change on the select and not on the options ... this should work

(defn myselect []
  (let [ratom (reagent/atom nil)]
    (fn []
      [:div
       [:select {:value (or @ratom "")
                 :on-change #(reset! ratom (-> % .-target .-value))
                 }
        [:option {:value "foo"} "Foo"]
        [:option {:value "bar"} "Bar"]
        [:option {:value "baz"} "Baz"]
        ]

       [:h1 "You selected: " @ratom]
       ])))

eveko00:01:10

It is on the select, however I am using an adapter for the dropdown component of semantic ui

eveko00:01:28

Time to fiddle some more or just use a regular select and try to apply the CSS :/

gadfly36100:01:08

@eveko You can use soda-ash (reagent + semantic ui react) to do that too

(defn my-semantic-select []
  (let [ratom (reagent/atom nil)]
    (fn []
      [:div
       [sa/Dropdown
        {:placeholder "Select something..."
         :value       (or @ratom "")
         :selection   true
         :options     [{:value "foo"
                        :text  "Foo"}
                       {:value "bar"
                        :text  "Bar"}
                       {:value "baz"
                        :text  "Baz"}
                       ]
         :on-change   (fn [_ data]
                        (let [value (get (js->clj data :keywordize-keys true)
                                         :value
                                         "")]
                          (reset! ratom value)))
         }
        ]
       [:h1 "You selected: " @ratom]
       ])))

gadfly36100:01:08

@eveko You can use soda-ash (reagent + semantic ui react) to do that too

(defn my-semantic-select []
  (let [ratom (reagent/atom nil)]
    (fn []
      [:div
       [sa/Dropdown
        {:placeholder "Select something..."
         :value       (or @ratom "")
         :selection   true
         :options     [{:value "foo"
                        :text  "Foo"}
                       {:value "bar"
                        :text  "Bar"}
                       {:value "baz"
                        :text  "Baz"}
                       ]
         :on-change   (fn [_ data]
                        (let [value (get (js->clj data :keywordize-keys true)
                                         :value
                                         "")]
                          (reset! ratom value)))
         }
        ]
       [:h1 "You selected: " @ratom]
       ])))

eveko12:01:01

I am getting invalid hiccup form assert error

gadfly36112:01:39

Try starting from a clean project, I am pretty certain that error is happening from a different part of your codebase

eveko12:01:53

Well the error show [nil {} and the map is exactly the same as the semantic select here above

gadfly36112:01:19

1. lein new reagent-figwheel semantic-select 2. add [soda-ash "0.76.0"] to deps vector in project.clj file 3. add <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css"> to the <head> tag inside resources/public/index.html 4. open core.cljs and add [soda-ash.core :as sa] in the :require block of the ns 5. also in core.cljs, replace the page function with the following

(defn my-semantic-select []
  (let [ratom (reagent/atom nil)]
    (fn []
      [:div
       [sa/Dropdown
        {:placeholder "Select something..."
         :value       (or @ratom "")
         :selection   true
         :options     [{:value "foo"
                        :text  "Foo"}
                       {:value "bar"
                        :text  "Bar"}
                       {:value "baz"
                        :text  "Baz"}
                       ]
         :on-change   (fn [_ data]
                        (let [value (get (js->clj data :keywordize-keys true)
                                         :value
                                         "")]
                          (reset! ratom value)))
         }
        ]
       [:h1 "You selected: " @ratom]
       ])))


(defn page [ratom]
  [:div
   [my-semantic-select]
   ])
6. from a terminal, run lein figwheel dev 7. open a browser and go to localhost:3449

gadfly36112:01:34

That should work for you

eveko13:01:18

trying it now

eveko13:01:14

yeah it works

eveko13:01:25

maybe it is a problem with shadow-cljs

eveko13:01:25

As it handles cljsjs in a different way

eveko13:01:48

thanks for the help

gadfly36113:01:28

My guess is somewhere there is a nil when you don't expect it, and you're trying to use that nil as a reagent component .. i am not sure, but i think shadow-cljs wouldn't cause an issue if you were able to use it making other 'reagenty' things

eveko13:01:55

well the nil is apearing where the dropdown should be

gadfly36113:01:17

I'd have to see the rest of your code, just giving my gut reaction to that

gadfly36113:01:52

But glad it worked out from the reagent-figwheel template

gadfly36113:01:53

Ohh gotcha, perhaps you do need to pull in semantic ui react when using Shadow

gadfly36113:01:13

Bc it would have been pulled in thru cljsjs

eveko13:01:27

but you need to spoof librarys using cljsjs when using shadow

eveko13:01:07

otherwise I would get an error that soda-ash did not have access to the namespace

eveko13:01:31

maybe I am exporting with the wrong symbol for semantic ui

eveko14:01:29

yeah I fixed it the exported symbol should have been "semanticUIReact"

eveko14:01:05

I can't get my atom to bind, if I use the function above it works

gadfly36115:01:20

@eveko you need that inner function otherwise the ratom won't persist after each rerender