Clojurians Log v2

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

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 ez-wire.form)

> 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

Like

(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?

Web UI.

I thought you were talking about changing something in UI initially, not in the library itself.

Right 🙂

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 🙂

https://github.com/reagent-project/reagent/blob/master/examples/material-ui/src/example/core.cljs#L36

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.