Element disappears while dragging

[Ken-Scofield]

Describe the Bug

https://github.com/bpmn-io/form-js/assets/30038865/d1c3c119-0f47-4635-9d88-320fd3c16e09

Environment

• Host (Browser/Node version), if applicable: [e.g. MS Edge 18, Chrome 69, Node 10 LTS]
• OS: [e.g. Windows 7]
• Library version: [e.g. 2.0.0]

[Ken-Scofield]

@barmac, @Skaiir Please help me! It's seems bug about rows id.

[Ken-Scofield]

And, How to quick fix it, Can you provide some ideas? (Start with the source code) @Skaiir

[Skaiir]

@Ken-Scofield Hey there, sorry for the delays, I've been off. So I can give you some hints here, but I don't know the exact fix for this issue, would have already fixed it otherwise 😄. So my understanding is, this is an issue related to the interaction between Draggle (our fork of Dragula), and Preact.

Here's how I understand the problem:

• Draggle cuts and pastes elements inside of the DOM as we drag and drop things around.
• At the same time, we update the schema which is picked up by Preact's diffing.
• These two conflict somehow, I think Draggle moves the div first to where Preact would put it, which confuses it during virtual DOM calculations and leads Preact to get rid of the div entirely.

Some potential ways to solve this:

• In the very short term, I noticed this problem started happening a lot more in preact@10.16.0, which included some changes to the diffing algorithm. So if you are using a newer version of Preact, forcing the version to 10.15.1 might help.
• Another potential direction is as you've mentioned, IDs. Maybe we aren't setting proper identifiers in some array renderers, and it's causing problems. I'd mess around with the column and row renderers, and see if I can somehow give the previewed dragged element different IDs from the actual ones (if they even have any, need to investigate :D).
• Changing the way we do drag and drop. Instead of actually moving the DOM, we only create temporary indicators about where we're going to drop the new element, and on element drop, we don't do anything except change the schema, which then should be properly picked up by preact's VDOM diffing. There is this old issue where I wanted to investigate this. I think I have a branch for this as well somewhere locally for implementing the feature on Draggle to do "virtual" drops.

I can look into this for a little bit.

[Ken-Scofield]

@Ken-Scofield Hey there, sorry for the delays, I've been off. So I can give you some hints here, but I don't know the exact fix for this issue, would have already fixed it otherwise 😄. So my understanding is, this is an issue related to the interaction between Draggle (our fork of Dragula), and Preact.

Here's how I understand the problem:

• Draggle cuts and pastes elements inside of the DOM as we drag and drop things around.
• At the same time, we update the schema which is picked up by Preact's diffing.
• These two conflict somehow, I think Draggle moves the div first to where Preact would put it, which confuses it during virtual DOM calculations and leads Preact to get rid of the div entirely.

Some potential ways to solve this:

• In the very short term, I noticed this problem started happening a lot more in preact@10.16.0, which included some changes to the diffing algorithm. So if you are using a newer version of Preact, forcing the version to 10.15.1 might help.
• Another potential direction is as you've mentioned, IDs. Maybe we aren't setting proper identifiers in some array renderers, and it's causing problems. I'd mess around with the column and row renderers, and see if I can somehow give the previewed dragged element different IDs from the actual ones (if they even have any, need to investigate :D).
• Changing the way we do drag and drop. Instead of actually moving the DOM, we only create temporary indicators about where we're going to drop the new element, and on element drop, we don't do anything except change the schema, which then should be properly picked up by preact's VDOM diffing. There is this old issue where I wanted to investigate this. I think I have a branch for this as well somewhere locally for implementing the feature on Draggle to do "virtual" drops.

I can look into this for a little bit.

Thank you so much for your generous help.