Clojurescript re-frame: Changing focus to a newly-created element

Question

I am building a re-frame app with a list of text input fields. I would like the behavior to be that when the user presses RETURN, a new row is created and focus is placed on the new row. I have succeeded in creating the new row, however, when I attempt to change focus to that new row with this call within change-focus event-handler:

(.focus (.getElementById js/document focus-element))

I am getting an error: Cannot read property 'focus' of null.

I presume that is because the view has not yet rendered the newly created row. What is the best way to go about changing focus to a new element using re-frame?

Should I put the active-row in my state atom and render that in the view? Or possibly fire another event after the view has been rendered? I'd love some input.

Featalion Featalion · Accepted Answer · 2017-07-19T00:21:37

If each row that your form adds is component, then you can set handler on componentDidMount lifecycle callback. It will be called after component already rendered. To do that in re-frame you should use reagent's create-class like that

(defn my-row [input-id]
  (reagent/create-class
   {:component-did-mount
    #(.focus (.getElementById js/document input-id))
    :reagent-render
    (fn [input-id]
      [:div.form-group
       [:input.form-control {:id input-id, :type "text"}]])}))

You can try to play with React.JS refs or reagent/dom-node instead of using JS interop code in componentDidMount handler function.

Clojurescript re-frame: Changing focus to a newly-created element

1 Answers