-
-
Notifications
You must be signed in to change notification settings - Fork 1.4k
Description
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.