Controlled input

[r0man]

Hello @ajchemist,

I would like to use your rum-mdl library, but have problems
getting a controlled input working. This happens only if I nest a
textfield-input inside a textfield component. The problem is
that every time I enter something into the input field it looses
focus. I think the problem is that the inner elements get
replaced instead of re-rendered. I would like to set the key
attribute but looking at the React dev tools it looks like they
don't get passed through, but auto generated.

Here's an example that doesn't work for me. Is there a way to set
my own react key?

(rmdl/textfield
 {:class "signup-form__username"
 :mdl [:floating-label]}
 (rmdl/textfield-input
  {:id "username"
  :type "text"
  :on-change (change-field coolant :signup/username)
  :value (:username form)})
 (rmdl/textfield-label
  {:for "username"}
  "Choose your username"))

Thanks, Roman.

[ajchemist]

@r0man

ok, I see your problem. In this case, If you dont want to lose a input focus, you have to wrap mdl/textfield-input with rum/reactive mixin for now.

(rum/defc reactive-textfield-input < rum/reactive [ref]
  (mdl/textfield-input
   {:id "username"
    :type "text"
    :value (:signup/username (rum/react ref))
    :on-change #(swap! ref assoc :signup/username (.. % -target -value))}))

then call like this

(mdl/textfield
   {:class "signup-form__username" :mdl [:floating-label]}
   (reactive-textfield-input ref)
   (mdl/textfield-label {:for "username"} "Choose your username"))

and react key thing is obviously my mistake. I will fix this as soon as possible.

[ajchemist]

ping @r0man

try [rum-mdl "0.1.1"]

and I added a example on textfields section so I wish that it would be the experience as you want.

https://github.com/aJchemist/rum-mdl/blob/master/examples/rum/mdl/examples/textfields.cljc#L19
http://ajchemist.github.io/rum-mdl/

[r0man]

@ajchemist Yes, rum/with-key did the trick. Thanks for looking into this!

[r0man]

@ajchemist I just got my form working, but when I put it into a MDL card I get the same problem again. The input elements are loosing focus. I could wrap all my child elements into a rum/with-key but wonder if there isn't a better way doing this. I think the auto generated keys for children are not a good idea. They basically make all controlled inputs that are children of a component loose focus. Any ideas how to solve this? Do you use controlled input elements as well? What about not auto generating the keys and let the user specify them via a :key in the component attributes?

[ajchemist]

@r0man please try [rum-mdl "0.1.2-SNAPSHOT"] first.

Recently I've not been able to go on cljs frontend work. so honestly I couldn't use rum-mdl much till now. 😅 and I have some my very old code (probably former rum-mdl) that should be migrated to rum-mdl, and there was no autokeying stuff so I couldn't make it out about mistake of autokeying, here in rum-mdl.

[ajchemist]

Anyway the problem of replacing not re-rendering is caused by gensym based keying. and I fixed it to positional keying which makes sense.

[r0man]

@ajchemist I tested 0.1.2-SNAPSHOT and it works as expected. Thanks!