Resize handles disappear after removing grid element from the DOM

[Voodu]

Subject of the issue

When grid element is removed from the DOM using el.remove() + removeWidget(el, false) instead of removeWidget(el, true), drag and drop handles of all the grid elements disappear.

In other words, if the element is removed directly through the DOM manipulation, before removeWidget is called, removeWidget called later is not able to remove it correctly. After a bit of debugging in the source code, it seemed like the problem comes from missing parent.

To give some context, we encountered this problem when displaying some elements with Vue. The list which the elements data is taken from changes, so Vue updates DOM by itself and it required a bit of ugly code to inject removeWidget before DOM update.

Your environment

gridstack 7.0.0
Ubuntu 20.04, Chrome

Steps to reproduce

https://jsfiddle.net/L6907w3h/2/

Expected behavior

Element should be removed and resize handles should still work.

Actual behavior

After element is removed, resize handles don't show up.

[adumesny]

good bug report! looks like a v6+ issue (when I added tracking mouse enter).

caused by the line that has been there for a long time (3 years!), but now not removing DD can be seen as missing handles in v6

if (el.parentElement !== this.el) return;

[adumesny]

fixed in v7.0.2