This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2021-03-04
Channels
- # announcements (4)
- # asami (38)
- # babashka (20)
- # beginners (188)
- # cider (1)
- # clara (11)
- # clj-kondo (103)
- # clj-together (1)
- # cljs-dev (15)
- # clojure (138)
- # clojure-australia (5)
- # clojure-europe (33)
- # clojure-france (1)
- # clojure-losangeles (5)
- # clojure-nl (4)
- # clojure-norway (11)
- # clojure-serbia (3)
- # clojure-uk (11)
- # clojurescript (45)
- # community-development (3)
- # conjure (22)
- # core-async (18)
- # datomic (44)
- # defnpodcast (4)
- # deps-new (1)
- # depstar (49)
- # events (2)
- # fulcro (33)
- # girouette (2)
- # honeysql (37)
- # jackdaw (5)
- # jobs-discuss (16)
- # kaocha (3)
- # leiningen (4)
- # lsp (77)
- # malli (55)
- # membrane (4)
- # off-topic (61)
- # polylith (5)
- # quil (5)
- # reagent (33)
- # reitit (12)
- # remote-jobs (1)
- # reveal (4)
- # rewrite-clj (2)
- # sci (16)
- # shadow-cljs (22)
- # sql (1)
- # test-check (27)
- # tools-deps (44)
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
)
And I cannot really wrap it in an HTML element either, as that would break some functionality
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.
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.
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?