Skip to content

Resize handles disappear after removing grid element from the DOM #2081

Closed

Description

@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.

Activity

  1. adumesny commented on Oct 14, 2022

    @adumesny
    Member

    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;

  2. adumesny commented on Oct 14, 2022

    @adumesny
    Member

    fixed in v7.0.2

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions