Is there any way to manually prevent a reagent component to unmount? I see there are some ways to do it in react, unsure how well they translate to reagent
That’s the main reason I even got into the problem in the first place 🙂
I was using :default-value to avoid the problem. Worked fine until I started flipping things on and off
I'm struggling to imagine how such a need might arise in the first place. Can't you just keep the relevant Hiccup vector at the required place?
I’m adding branching to
ez-wire.form. As part of that I need to be able to hide and show fields in the form. However,
ez-wire.form itself does not handle the rendering as it is component agnostic.
That means that when I hide a field it unmounts, and then remounts when it’s active again. The problem is specifically related to the react components used and text updates causing the cursor to jump. Since I do not control the components in question, I cannot rely on the cursor hack that reagent offers for the default text input, and instead use
:default-value when the field is initialized. That causes a problem when you unmount/remount components as the input is no longer rendered correctly (but still correct in the data that is held by
> when I hide a field it unmounts How do you hide a field exactly?
And I cannot really wrap it in an HTML element either, as that would break some functionality
It’s a RAtom (boolean) that handles that
if true, run the code, if false, do nothing
Or rather, return nil
(when @show? [my-input])
Yeah… to that effect
A proper solution would be to use the
display: none; CSS. If you really can't add a
:div around that component, maybe there's a way to add styles to that component or a class name.
Can’t do that for the render option where you have control over the rendering. I’d break backwards compability for functionality that is rather important
It’s possible for all the other rendering options of the form, but that one I cannot get around since I give up control over most of the render process
I have no idea what "backwards compatibility" for a WUI means, but I guess you know better. :) Alas, I can't offer any other ways to do that.
I’d break this: https://emil0r.github.io/ez-wire-docs/#wired-flight-form
Hmmm… maybe I could work around that…
It might be just "compatibility" then, not a "backwards" one. Perhaps it's worth breaking it if it's truly the only way. Preventing React/Reagent from unmounting something that doesn't exist in vDOM, if even possible, sounds like a crutch that could break at any moment.
Looks like it
What is the W in WUI btw?
I thought you were talking about changing something in UI initially, not in the library itself.
What other ways are there in React to do this, other than just using CSS to hide the element?
I found some threads talking about manually halting the unmount
So it should be doable
Read those threads wrong 🙂
For those interested. It’s not advertised that much 🙂
And it’s in the comment above as well 😂 :trollface:
But it has nothing to do with hiding and showing an item. It's when the ratom controlling the component changes. Without that hack, you would have your cursor jump at the start on each keystroke.