Fork me on GitHub

I would like to have 3 input fields. when one is submitted the next one should get the focus. did somebody do that before? I thought that should be an easy task but it seems to not be so easy.


I wanted to have a :focus property that I can just set to true or to false so that I can save that in my state which one should have the focus. but there is no focus prop and I had a hard time to figure out on which object I can call the focus function


the only way I found is to use ref for it. But I don't really like that.


this is what I have so far:

(defn focusable-input [attrs]
    {:component-will-receive-props (fn [this new-argv]
                                     (when (:focus (ru/extract-props new-argv))
                                       (.focus (aget this "refs" (:ref attrs)))))
     :display-name "focusable-input"
       (fn [attrs]
         [input attrs])}))


i can use it than like that:

  {:ref "my-input" 
   :focus (:my-input-is-focused @my-state) 
     #(do (swap! my-state assoc :my-input-is-focused false)
          (swap! my-state assoc :next-input-is-focused true))]


Is there a better way as using "ref" to do the focus? Am I maybe missing something and there is a lot simpler way? Am I doing it wrong? 😄 (I am new to the reagent and react native world...)


@knotschi: in rum i'd keep a local atom on a parent view with "who is focused" flags, on submit changed their values, and re-rendered accordingly.


wanted to show you this, but you already saw it simple_smile


yeah thats probably a good Idea for the whole form. But I still need an input component that accepts a :focus property. My problem was more the calling of the focus function. The only way I found was with using a ref to get the object inside :component-will-receive-props to call the focus function. this feels quite hacky


which looks much better, than storing/using references to components.


looks rather similar to what you did, but avoids(?) surfacing refs


I dont know 😄 I am not even really sure why I need the ref. It was more or less a try and error solution. I just did not find any other way to call the .focus function. maybe with rum I would not have the problem


hopefully facebook is just implementing the focus property