How to clean up event listeners in gridjs-spreadsheet

In our application, a spreadsheet may be opened and closed by a user multiple times. We also allow multiple spreadsheets to be open on a given page at the same time.

I’ve noticed that after removing the spreadsheet from the DOM (by unmounting the enclosing React component), the event listeners for gridjs-spreadsheet are still on the window:

image.png (17.9 KB)

I’m not sure if this has any negative effects in practice, but it doesn’t seem right that there are listeners for a component that no longer exists.

Is there a way to clean up these listeners? For example, a function on spreadsheet like spreadsheet.destory()?

@jrf.att
We’ve evaluated it and your suggestion is fine.
We have opened the following new ticket(s) in our internal issue tracking system and will deliver their fixes according to the terms mentioned in Free Support Policies.

Issue ID(s): CELLSGRIDJS-804

You can obtain Paid Support Services if you need support on a priority basis, along with the direct access to our Paid Support management team.

@jrf.att
We have add xs.destory() method to kill all binded event.
Please update to v23.5 ;
you need to update for both server side GridJs dll through nuget package and client side js through npmjs.

@peter.zhou I just realised I had a typo in my suggestion. I meant to say “destroy”, not “destory”. Can you update the function?

Also, looks like one of the functions is still bound to resize:

          _onResize: function _onResize() {
            this.calcOffset();
          },

@jrf.att,

We will change xs.destory() method --> xs.destroy().

We will evaluate it soon.