Grid destroy() Does Not Remove Listeners

[jasondalycan]

When destroying and recreating a grid that previously had a listener on it, the listener does not appear to be removed. Please see the following example code. The code below is called against an existing grid that needs to be recreated (SPA use-case):

widgetsGrid.destroy(false);
    
    widgetsGrid = GridStack.init(
        {   //column: 24,
            resizable: false,
            cellHeight: "40px",
            margin: 10,
        }, itemDiv);

    widgetsGrid.on("added", async function (event, items)
        {   console.log("Items: ", items);
         }

The above "added" event runs twice after the grid is destroyed and recreated with the above code. Shouldn't destroy remove the listeners as well? If not, how do you remove the listeners when destroying the grid?

[jasondalycan]

Update: what resolves the issue (as a workaround) is the following:

widgetsGrid.destroy(true);

if(domElementForGridStack)
{   domElementForGridStack.remove();
}

domElementForGridStack = document.createElement("div");
domElementForGridStack.className = "grid-stack";

GridStack.init(options, domElementForGridStack);

So essentially passing true and explicitly checking for the DOM element GridStack is bound to and removing it, then re-initializing GridStack resolves the issue.

Is the above expected behavior, or should grid.destroy(false) remove the listeners as well?

[adumesny]

can you please post a jsfiddle equivalent showing the issue as the bug report ask for ?

[adumesny]

grid.destroy(false) should work - leave dom element behind but still remove any GS stuff including events

[adumesny]

closed in next release. if you find this lib useful don't forget to donate!