Fork me on GitHub
#reagent
<
2021-03-04
>
emil0r15:03:48

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

p-himik15:03:11

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?

emil0r15:03:03

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)

p-himik15:03:18

> when I hide a field it unmounts How do you hide a field exactly?

emil0r15:03:22

And I cannot really wrap it in an HTML element either, as that would break some functionality

emil0r15:03:54

It’s a RAtom (boolean) that handles that

emil0r15:03:03

if true, run the code, if false, do nothing

emil0r15:03:14

Or rather, return nil

p-himik15:03:17

Like

(when @show?
  [my-input])

emil0r15:03:28

Yeah… to that effect

p-himik15:03:10

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.

emil0r15:03:54

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

emil0r15:03:45

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

p-himik15:03:09

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.

emil0r15:03:32

Hmmm… maybe I could work around that…

p-himik15:03:08

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.

emil0r15:03:10

Looks like it

emil0r16:03:09

What is the W in WUI btw?

p-himik16:03:28

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

emil0r16:03:15

Right 🙂

juhoteperi16:03:35

What other ways are there in React to do this, other than just using CSS to hide the element?

emil0r16:03:43

I found some threads talking about manually halting the unmount

emil0r16:03:56

So it should be doable

emil0r16:03:09

Read those threads wrong 🙂

emil0r20:03:10

For those interested. It’s not advertised that much 🙂

emil0r20:03:06

And it’s in the comment above as well 😂 trollface

p-himik21:03:21

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.

emil0r09:03:22

That’s the main reason I even got into the problem in the first place 🙂

emil0r09:03:36

I was using :default-value to avoid the problem. Worked fine until I started flipping things on and off