Fork me on GitHub
#reagent
<
2017-07-10
>
qqq15:07:01

I have a piece of code where:

[(fn [] 
               [:input {:size      "80" 
                        :value     @r-text
                        :on-change #(reset! r-text (ba.js/value-<-event %))}])]
causes the input field tol lose focus whenever I click on it yet
[:input {:size      "80" 
                        :value     @r-text
                        :on-change #(reset! r-text (ba.js/value-<-event %))}]
works perfectly fine. This is confusing to me, as I generally expect that adding a [(fn [] .... )] should never cause something to not work (as it just "adds a layer of redirection causing the part to re-rendr when an r-atom it uses chanves value).

noisesmith16:07:16

right, but wouldn’t it be strange for an item that gets deleted and recreated to preserve focus status?

mccraigmccraig17:07:38

@qqq have you tried giving react a hint that you are updating a component with :key metadata or attr ?

pesterhazy17:07:01

@qqq, the problem could be that the component gets unmounted and remounted again in the first example

pesterhazy17:07:21

it's one of these corner cases ("stateful" components) where keeping a component mounted is necessary, not just for performance but also for user experience

pesterhazy17:07:36

I think this is what @mccraigmccraig is suggesting as well?

pesterhazy17:07:31

I'd first verify that this is the problem by adding logging to the component (make it a form-3 component and add did-mount and will-unmount lifecycle methods that log)

mccraigmccraig17:07:31

yes @pesterhazy that is what i was meaning

pesterhazy17:07:59

the other possibility is that is matters where you are dereffing the ratom

pesterhazy17:07:02

so the issue might be todo with the surrounding code - something else higher up in the comp tree gets rerendered, causing the remount

qqq20:07:09

@mccraigmccraig @pesterhazy : resolved the issue ; in the end

[(fn [] ....)] // loses focus on click
(def some-component (fn [] ...))
[some-component] // works
so it appears to be due to "the vector containing a fn created on the fly makes bad thingshappen"

qqq20:07:19

I'm not sure why, but that's what I ended up seeing in this situation

qqq20:07:48

actually wait, does this even make sense?

qqq20:07:59

this seems to break some rule of substitution

pesterhazy21:07:25

It makes sense because the Anon fn gets created on every render

pesterhazy21:07:54

It's a new object reference each time

pesterhazy21:07:44

So react assumes that it's seeing a different comp

pesterhazy21:07:08

Substitution is not broken because you're dealing with the function as an object reference, not with a simple call. Philosophically speaking the function is mentioned, not used

qqq23:07:15

@pesterhazy : thanks for clarying this

qqq23:07:36

this 'inconsistency' was driving me crazy and making me very uncomfortable with reagent; but all owrks well now 🙂