Skip to content

error in _onResizeHandler -> listener not removed correctly on destroy() #1369

@mtveerman

Description

@mtveerman

Subject of the issue

I have a SPA in Vue where I create and destroy grids when switching pages. All seems to work fine, until a resize event is called. I get errors:
Cannot set property column of undefined, pointing to https://github.com/gridstack/gridstack.js/blob/develop/src/gridstack.ts#L503
or
Cannot read property '_max' of null, pointing to
https://github.com/gridstack/gridstack.js/blob/develop/src/gridstack.ts#L1102

Both of these originate from the _onResizeHandler and I believe the problem is there. The event listener is not removed from the window during a destroy of the grid. Therefore the listener remains active, but when called, an error occurs because the grid is no longer there.

The listener is added using a .bind(this) here: https://github.com/gridstack/gridstack.js/blob/develop/src/gridstack.ts#L305
and removed inside the destroy function here: https://github.com/gridstack/gridstack.js/blob/develop/src/gridstack.ts#L541

But in reality it's not removed, and one can see in the dev pane of the browser. Reason is because of the .bind as explained here: https://stackoverflow.com/a/22870717/9258054

Your environment

^2.0.0
Chrome 85

Steps to reproduce

https://jsfiddle.net/fwgpyhs8/1/
Although I cannot reproduce the error in the console, this example does show that the event listener remains active even thought the grid was destroyed.

Expected behaviour

Event listener should be removed on destroy()

Actual behaviour

Event listener remains active, leading to errors when actual event is called.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions