How to pass focus from one element to another in Reagent(Clojurescript)?

Question

I'm trying to write reusable tag control with reagent. What I need to do is to focus input field after user clicks ancestor div element. To be more clear, I would like to set focus on input with class tag-input after user clicks div with class form-element How can I implement this?

[:div.form-element
  [:div.some-other-class
    [:ul
      [:li "entered-tag"]
    ]
  ]
  [:input.tag-input {:type "text"}]
]

It might actually be a better idea to make the clickable things labels with for attributes and avoid handling this in clojurescript at all. — rojoca, Oct 13 '15 at 21:10

score 1 · Answer 1 · answered Oct 13 '15 at 15:24

you have to implement some oldschool click handling i guess:

[:div.form-element
  {:on-click #(do (println :click-click)
                  (.focus (.getElementById js/document "my-input")))}
  [:div.some-other-class
    [:ul [:li "entered-tag"]]]
    [:input.tag-input {:type "text" :id "my-input"}]]

so you probably should create some factory function for this form-element stuff:

(defn form-element [id]
  [:div.form-element
    {:on-click #(.focus (.getElementById js/document id))}
    [:div.some-other-class
      [:ul [:li "entered-tag"]]]
      [:input.tag-input {:type "text" :id id}]])

and use it like this:

[:div
  (form-element "form-element-1")
  (form-element "form-element-2")]

works fine for me

How to pass focus from one element to another in Reagent(Clojurescript)?

1 Answers1