Fork me on GitHub
#fulcro
<
2021-12-07
>
zeitstein14:12:41

Playing around with contenteditable. Using transact!! still makes the cursor jump around. Using the :refresh option doesn't update other instances of the content being modified. Does transact!! only work with inputs? transact! works as expected (cursor jumps, but UI is refreshed). Though it would break the state -> ui model, I've thought about skipping transact and directly swapping on the db atom. This always made a certain kind of sense to me – why update the UI when it is already in the desired state? This might even make sense for debouncing and having more precise undo control. But, then the old problem re-appears: how to propagate the changes to other instances of the content being edited? I'm new to Fulcro and React, so any pointers would be helpful. Look for solutions in JS land?

Jakub Holý (HolyJak)16:12:37

Transact!! Only updates the one component. For the cursor jumping there were some options about raw /wrapped inputs I don't remember. Pejska someone knows...

tony.kay16:12:52

Jakub is right about the targeted rendering. The only way it can work is to render just the component target. The internals of transact!! keep the calling thread and use React/setState behind the scenes, so it should be equivalent to using component local state. That said, the “accepted” React answer is to use Component local state (or hooks useState). If that still doesn’t work, perhaps React doesn’t yet work well with contenteditable? I’d try component local state, and if that doesn’t work, I’d look for React issues/stack overflow questions.

tony.kay16:12:21

You can certainly skip the UI refresh and update the db atom with a swap if you want to. There are no hard rules as long as you know what you’re doing. The trick is that if something else (async load finishes from some other interaction) happens you may get a render anyway.

tony.kay16:12:48

I assume you watched the grokking fulcro video on inputs? I mean, it sounds like you understand it well enough.

zeitstein17:12:37

I did watch the video, but probably a lot I still don't understand. I didn't get that :refresh cannot work with transact!!, thanks. > The trick is that if something else (async load finishes from some other interaction) happens you may get a render anyway. Hm, thanks, going to keep that in mind. So, no way to tell Fulcro something like: "refresh all components with this ident except the one I'm calling this function from?" 🙂 Ah, probably going to have to deal with the cursor manually, anyway.

tony.kay17:12:35

You can only refresh subtrees. Depending on your choice of renderer, you can tell Fulcro to do a targeted refresh by ident, but it will be the subtree of every component with that ident.

tony.kay17:12:01

or you can plug your own renderer, which is pretty simple, and do whatever you want…but I think this is more a React problem than a Fulcro one.

zeitstein17:12:21

Thank you, Tony.

dvingo21:12:08

one thing to double check is that your'e not using wrapped inputs (shadow config: :compiler-options {:external-config {:fulcro {:wrap-inputs? false}}}

tony.kay23:12:49

contenteditable isn't an input @U051V5LLP

tony.kay23:12:28

and wrap-inputs doesn't actually matter if it were. The transact!! does synchronous processing, which means that the props come back to the component immediately. Using wrapped inputs in that case is fine, it's just you can shave off a very small amount of processing in your rendering if you use raw inputs...but in hindsight it is so small as to be insignificant, and the option is kinda useless 😛

dvingo01:12:35

ooh right, whoops