Fork me on GitHub
#cljsrn
<
2016-04-15
>
knotschi11:04:34

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.

knotschi11:04:58

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

knotschi11:04:38

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

knotschi11:04:01

this is what I have so far:

(defn focusable-input [attrs]
  (r/create-class
    {: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"
     :reagent-render
       (fn [attrs]
         [input attrs])}))

knotschi11:04:59

i can use it than like that:

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

knotschi11:04:39

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...)

misha12:04:27

@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.

misha12:04:57

wanted to show you this, https://github.com/facebook/react-native/issues/641 but you already saw it simple_smile

knotschi14:04:24

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

misha15:04:46

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

misha15:04:15

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

knotschi15:04:00

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

knotschi15:04:26

hopefully facebook is just implementing the focus property