Form components disappear after moving them around in a row following preact 10.16.x update

[christian-konrad]

Describe the Bug

Form components disappear after moving them around in a row .

Steps to Reproduce

1. Add components into some rows.
2. Drag components from one row into another.
3. Occasionally, components start to disappear. Once that happened, they continue to disappear on every drag, and require the form to re-render to appear again.

See videos:

Bildschirmaufnahme.2024-02-19.um.20.21.32.mov

Bildschirmaufnahme.2024-02-19.um.20.23.04.mov

Expected Behavior

Components never disappear after dragging.

Environment

• form-js v1.7

[marcosgvieira]

@Skaiir can you please update the status on this one?

[Skaiir]

So there's two aspects of this bug. This is an old bug that resurfaced due to preact getting upgraded in the web modeler somehow.

The issue is as follows:

• Preact moves components around when it re-renders
• Dragula moves divs around as well
• The combination of the two causes problems with preact's diffing algorithm which causes it to delete the new element entirely in some circumstances
• With version 10.16.x, preact started doing some smarter diffing, which is good for performance, but uncovers this bug which always existed, and was simply being fixed by preact's less smart, more brute force diffing.

How to fix:

• in web modeler, short term, restrict preact to a compatible version, we already have the restriction in this library but it seems the web modeler doesn't care and still runs the latest version
• here, long term, change the way our drag and drop works, which means not moving elements around at all and let preact handle the moving instead, which I started to tackle with Do not move elements during a drag and drop until the mouse is released, use a drop element instead #1058 until we deprioritized

[Skaiir]

There is also this issue which tracks the same problem:

#760

[Skaiir]

Some updates here, the reason why the bug resurfaced in web modeler was that our preact version restricting was yarn specific, and wasn't updated during the change to npm. I have a fix for this on web modeler here

[Skaiir]

Fixed in web modeler via https://github.com/camunda/web-modeler/commit/b4cd239b943b75cd2359cdf56fde24c34682ec89, I will close this issue and use the older one for future reference.

[Ken-Scofield]

mark