A minimalistic ClojureScript interface to React.js
emil0r 2021-03-04T15:36:48.071500Z

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

emil0r 2021-03-05T09:58:22.077900Z

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

emil0r 2021-03-05T09:59:36.078100Z

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

p-himik 2021-03-04T15:38:11.071600Z

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?

emil0r 2021-03-04T15:44:03.071800Z

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-himik 2021-03-04T15:45:18.072100Z

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

emil0r 2021-03-04T15:45:22.072300Z

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

emil0r 2021-03-04T15:45:54.072600Z

It’s a RAtom (boolean) that handles that

emil0r 2021-03-04T15:46:03.072800Z

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

emil0r 2021-03-04T15:46:14.073Z

Or rather, return nil

p-himik 2021-03-04T15:46:17.073200Z


(when @show?

p-himik 2021-03-04T15:46:18.073400Z


emil0r 2021-03-04T15:46:28.073600Z

Yeah… to that effect

p-himik 2021-03-04T15:47:10.073800Z

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.

emil0r 2021-03-04T15:48:54.074Z

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

emil0r 2021-03-04T15:49:45.074200Z

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-himik 2021-03-04T15:50:09.074400Z

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.

emil0r 2021-03-04T15:50:52.074600Z

I’d break this:

emil0r 2021-03-04T15:53:32.074800Z

Hmmm… maybe I could work around that…

p-himik 2021-03-04T15:54:08.075Z

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.

emil0r 2021-03-04T15:57:10.075200Z

Looks like it

emil0r 2021-03-04T16:01:09.075400Z

What is the W in WUI btw?

p-himik 2021-03-04T16:03:09.075600Z

Web UI.

p-himik 2021-03-04T16:03:28.075800Z

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

emil0r 2021-03-04T16:04:15.076Z

Right 🙂

juhoteperi 2021-03-04T16:04:35.076200Z

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

emil0r 2021-03-04T16:05:43.076400Z

I found some threads talking about manually halting the unmount

emil0r 2021-03-04T16:05:56.076600Z

So it should be doable

emil0r 2021-03-04T16:14:09.076800Z

Read those threads wrong 🙂

emil0r 2021-03-04T20:57:10.077300Z

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

emil0r 2021-03-04T20:58:06.077500Z

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

p-himik 2021-03-04T21:51:21.077700Z

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.