materializecss/materialize

[Bug]: Scrollspy 3 event listener leaks

IvanPostu opened this issue · 2 comments

Before submitting...

Context

If you try for the next example:

<div class="row">
  <div class="col s12 m9 l10">
    <div id="introduction" class="section scrollspy">
      <p>Content</p>
    </div>
    <div id="structure" class="section scrollspy">
      <p>Content</p>
    </div>
    <div id="initialization" class="section scrollspy">
      <p>Content</p>
    </div>
  </div>
  <div class="col hide-on-small-only m3 l2">
    <ul class="section table-of-contents">
      <li><a href="#introduction">Introduction</a></li>
      <li><a href="#structure">Structure</a></li>
      <li><a href="#initialization">Initialization</a></li>
    </ul>
  </div>
</div>

To run

    // getEventListeners(document.body)    Array with N elements

    let elements = document.querySelectorAll('.scrollspy');
    let scrollspyInstances = M.ScrollSpy.init(elements, {});
    scrollspyInstances.forEach((value) => value.destroy());

    elements = document.querySelectorAll('.scrollspy');
    scrollspyInstances = M.ScrollSpy.init(elements, {});
    scrollspyInstances.forEach((value) => value.destroy());

    elements = document.querySelectorAll('.scrollspy');
    scrollspyInstances = M.ScrollSpy.init(elements, {});
    scrollspyInstances.forEach((value) => value.destroy());

    // Current: getEventListeners(document.body)    Array with N+3 elements
    // Expecting: getEventListeners(document.body)    Array with N

Current Behavior

No response

Expected behavior

No response

Possible Solutions or Causes

causes:

  _removeEventHandlers() {
    if (ScrollSpy._count === 0) {
      window.removeEventListener('scroll', ScrollSpy._handleWindowScroll);
      window.removeEventListener('resize', ScrollSpy._handleThrottledResize);
      document.body.removeEventListener('click', ScrollSpy._handleTriggerClick);
    }
  }

No response

Steps to reproduce

No response

Your Environment

  • Version used:
  • Browser Name and version:
  • Operating System and version (desktop or mobile):
  • Additional information you want to tell us:

Somehow happened while I was writting tests, closed because don't have clear path how to reproduce

What do you mean by eventlistener "leaks"?
Ah ok...
Some elements stay. I think i saw this also at Toast, Tooltip and Modal Components. Would be cool if wr find out. Because i had many tooltips on a page and then the page slowed down over time because the DOM Tree blew up. This needs to be fixed.