note your extra pair of ()

basically you have ((m "main" ...))

which means you are calling the result of (m "main" ...) as a function

and your let is borked

(let [my-pictures #js {:view (fn [] (m "main" #js {:class "container"}
                                      (m "article"
                                        (m "h1" #js {:role "button"} "My Name")
                                        (m "h2" "My Pictures"))))}])

or I guess that was supposed to be a def?

I'm not sure which I should use

The js is var

So I think def probably makes more sense

?

woot

that fixed it with def

let would be what you use for JS vars when its only in the function scope

def is for "globals"

(defn render-content []
  (let [my-pictures #js {:view (fn [] (m "main" #js {:class "container"}
                                        (m "article"
                                          (m "h1" #js {:role "button"} "My Name")
                                          (m "h2" "My Pictures"))))}]
    (println "test rendering")
    (println my-pictures)
    (println (. js/document -body))
    (m/mount (. js/document -body) my-pictures)))

or

(def my-pictures #js {:view (fn [] (m "main" #js {:class "container"}
                                     (m "article"
                                       (m "h1" #js {:role "button"} "My Name")
                                       (m "h2" "My Pictures"))))})

(defn render-content []
  (println "test rendering")
  (println my-pictures)
  (println (. js/document -body))
  (m/mount (. js/document -body) my-pictures))

that makes sense ty, do you recommend a specific scope over the other?

also any stuff you recommend for data structures?

if render-content is the only place where this is referenced use let

if you need it elsewhere you def

if its only constructed once and takes no other parameters like it currently does maybe use def

ty

Impossible to tell without having the code or the documentation for that dropdown component.

As a kind of hand-wavy response - don't hide the dropdown on blur immediately, give the other event a chance to be handled.

I thought the code would be long to post here. But here goes the clunky code. defn geo-zone-selector [] (let [state (r/atom {})] ;; you can include state (r/create-class {:component-did-mount (fn [] (reset! state (assoc @state :drop-down-visible false))) ;; ... other methods go here ;; name your component for inclusion in error messages :display-name "complex-component" ;; note the keyword for this method :reagent-render (fn [] (let [geozones @(rf/subscribe [:geozones]) country (:country geozones) gettext (fn [e] (-> e .-target .-value)), getdatavalue (fn [e] (-> e .-target .-dataset .-value)), getdatafname (fn [e] (-> e .-target .-dataset .-fname)), getlinktext (fn [e] (-> e .-target .-text)), spaces (fn [n] (str (apply str (repeat n "\u00A0")))), change-geozone-input (fn [e] (reset! state {assoc state :geozone-input-value (gettext e)})) select-geozone (fn [e] (reset! state {:drop-down-visible false :geozone-input-value (string/trim (getlinktext e)) :selected-geozone {:name (string/trim (getlinktext e)) :code (getdatavalue e)}}))] [:div.field [:label.label "Geographic Zone"] [:div.control [:div {:class "dropdown is-active"} [:div {:class "dropdown-trigger"} [:div {:class "field"} [:p {:class "control is-expanded has-icons-right"} ;; on focus lost, alert ;; on focus, show dropdown [:input#geo-zone {:class "input", :type "search", :placeholder "Geographic Zone" :on-focus #(reset! state (assoc @state :drop-down-visible true)) ;; :on-blur #(reset! state (assoc @state :drop-down-visible false)) :on-hange change-geozone-input :value (:geozone-input-value @state)}] [:span {:class "icon is-small is-right"} [:i {:class "fas fa-search"}]]]]] [:div {:class "dropdown-menu", :id "dropdown-menu", :role "menu" :style {:display (if (:drop-down-visible @state) "block" "none")}} [:div.dropdown-content {:style {:max-height "250px", :overflow-y "scroll"}} [:div [:a {:class "dropdown-item level-1-dropdown" :on-click select-geozone :data-fname (:name country) :data-value (:code country)} (str (spaces 0) (:name country))] (for [p (:provinces country)] [:div [:a {:class "dropdown-item level-1-dropdown" :on-click select-geozone :data-fname (:name p) :data-value (:code p)} (str (spaces 5) (:name p))] (for [sgz (:districts p)] [:a {:class "dropdown-item" :on-click select-geozone :data-fname (:name sgz) :data-value (:code sgz)} (str (spaces 10) (:name sgz))])])]]]]]]))}))

Yeah, long code should go into an attachment or at least in a triple-backtick block.

Well, my hand-wavy response seems like it's your best bet - just wrap that :on-blur in a js/requestAnimationFrame, that should work.

An arguably better approach that would also allow having focus within a dropdown is closing the dropdown only when focus leaves the whole component.

Interesting! I’m leaning towards the second solution. I’ll try them both. Thanks a lot!

It worked with the delay. For some reason, the on-blur is not propagating down to the elements. I’m sure it’s some rookie mistake somewhere. Thanks a lot!

maps are {"/home" home-page} not {("/home" "homepage")}

get rid of the extra () again

ty

you should really use an editor that can format the code for you

makes most syntax issues very obvious

What to use for emacs?

clojure-mode with font-lock?

I think that's just for syntax highlighting not linting

sorry, don't use emacs so don't know

I'll try flycheck-clj-kondo

You really need to start properly formatting your code here. The way you write it right now makes no sense - you wrote 2 values, one is a string "/" and the other is a JS literal, #js {...}. You can't assign them both to a single var, if that's what you want.

The closest alternative is to either extract them into their own respective vars or to wrap them in a vector, store it in some var, and use it with that m/route by using apply.

Idk what your first paragraph is trying to communicate but the last clause was what I was looking for

If you would explain what you mean by proper formatting it could be helpful to me

I mean code formatting in Slack messages, so that code stands out from English text.

And there's more to it than just that button in the WYSIWYG Slack message editor. (Oh, now it has a second button - well, that covers 90% then.)

I'll check if I can find any tutorials on how to format code on slack, I agree with you that the formatting I have been using for code blocks has made me uncomfortable. I'm new to using slack

There are 2 buttons - one for in-line code, the other is for multiline code blocks. You can do the same with just the backtick - inline singular for the former, on their own line around the code block and triple for the latter. The rest 10% is code attachments - they also support syntax highlighting and are collapsible.

I'll try out code attachments, I was annoyed that I didn't have any syntax highlighting

1) whatever makes sense to you. some people group by "components", some by "type", some by "topic". it really is up to you

2) not supported

3) http://myproject.frontend.app is fine. some people use .core, some .app, some .main. whatever makes sense to you

ty