Memory leak - Detached HTML elements

Expected behavior

I’m using interactjs in a SPA where I need to destroy/recreate several times an interact element. When I need to destroy an interactable element I do the following:

        interact(element).unset();
        interact.removeDocument(document);

This call should be enough for the GC to collect and garbage all the retained memory by interactjs.

Actual behavior

In the Heap Snapshots of Chrome there is a Detached HTMLElement stored and never released by interactjs every time I unset. The HTMLElement is referenced in the object Interactable inside the this._latestPointer variable this._latestPointer.eventTarget.

Solving proposition

For the moment, here is what happens inside the unset method:

https://github.com/taye/interact.js/blob/587eb948ba6adbfdda89c54c932fc3715d5651ab/packages/core/scope.ts#L93

I think we should call a new destroy method from interaction

          if (interaction.interactable === this) {
            interaction.stop()
          }
            interaction.destroy()

Inside the destroy method of interaction, it needs to clear up the memory like so :

    this._latestPointer = {
      pointer: null,
      event: null,
      eventTarget: null
    }

I’ve tried this solution and its working, the GC can collect and garbage.

I’m not proposing a Pull Request because maybe unset is not the right place for cleaning the memory, and maybe a new destroy or detach method should be provided by scope.

I let you guys decide.

System configuration

interact.js version: 1.4.0-RC.13 Browser name and version: Chrome Operating System: MacOS

[jf-m]

Found another one here downPointer in auto-scroll

[jf-m]

I’ve created a pull request #715 that solves this issue (at least in my test-case).

Hope it helps!