Fork me on GitHub
#reagent
<
2021-07-20
>
rgm01:07:10

I am having a very odd error in trying to take over a chunk of a wordpress page. I’m making up an interactive form with SVG animations, complex validation, etc. I’ve isolated the issue down to putting a single [:input ,,,] in a component, with a sibling, so [:div [:p (str @*state)] [:input {,,,}]] and the input has an :on-change that alters the state. The first render is fine: I have both the :p and the :input. The second render (in response to an input change) causes the input to vanish, and only the sibling :p gets rendered. I can see that the state change took, since it renders in the para. But the input gets yanked right off the DOM. It’s like reagent is only respecting the first branch of the tree. I’m not ruling out that this is a side effect caused by something, somewhere in the overall wordpress theme that I haven’t managed to kill off (eg. a stray keydown handler hung off absolutely everything by jquery or such). Especially this, given that I’ve got it working in a local test harness and the issue only comes up when I try running in the full themed environment. Just hoping someone might have seen a similar situation and has some ideas.

rgm04:07:40

OK, figured it out … it was a second competing React root on the same page 😞. All works perfectly OK if there’s better separation.

🎉 2