[Bug]: Uncaught TypeError: this._handleWindowScroll is not a function in ScrollSpy in Materialize 2.2.1

[PEDROJOSEGIL]

Before submitting...

• I have searched for duplicate or closed issues.
• I have read the CONTRIBUTING document and my issue is following the guidelines.
• I have read the template completely before filling it in.

Context

When using version 2.2.1 of Materialize, an error occurs in the browser console after initializing the ScrollSpy component and resizing the window. The specific error is:

Uncaught TypeError: this._handleWindowScroll is not a function
at e. (materialize.min.js:6:93188)
at r (materialize.min.js:6:2677)

Uncaught TypeError: this._handleWindowScroll is not a function
at e. (materialize.min.js:6:93188)
at r (materialize.min.js:6:2520)

This error does not occur in version 2.1.1 of Materialize, suggesting that the issue is related to changes introduced in version 2.2.1.

Current Behavior

An Uncaught TypeError: this._handleWindowScroll is not a function error occurs after initializing the ScrollSpy component and resizing the window.

Expected behavior

The ScrollSpy component should initialize correctly without errors in the browser console when resizing the window.

Possible Solutions or Causes

This issue does not occur in version 2.1.1 of Materialize. It appears to be related to changes introduced in version 2.2.1.

Steps to reproduce

Import version 2.2.1 of Materialize into a project.
Initialize the ScrollSpy component in the DOMContentLoaded event.
Resize the window.
Observe the browser console for the error.

Example:

<title>ScrollSpy Example</title>

<!-- Table of Contents -->
<div class="row">
    <div class="col s12 m4 l3">
        <ul class="section table-of-contents">
            <li><a href="#section1">Section 1</a></li>
            <li><a href="#section2">Section 2</a></li>
            <li><a href="#section3">Section 3</a></li>
        </ul>
    </div>
    <div class="col s12 m8 l9">
        <!-- Sections -->
        <div id="section1" class="section scrollspy">
            <h4>Section 1</h4>
            <p>Content for section 1.</p>
        </div>
        <div id="section2" class="section scrollspy">
            <h4>Section 2</h4>
            <p>Content for section 2.</p>
        </div>
        <div id="section3" class="section scrollspy">
            <h4>Section 3</h4>
            <p>Content for section 3.</p>
        </div>
    </div>
</div>

<!-- Import Materialize 2.2.1 JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/@materializecss/[email protected]/dist/js/materialize.min.js"></script>    
<!-- <script src="materialize.min.js"></script> -->

<!-- Initialize ScrollSpy -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var elems = document.querySelectorAll('.scrollspy');
        var instances = M.ScrollSpy.init(elems, {
            scrollOffset: 200 // Adjust this value as needed
        });
    });

    window.addEventListener('resize', function() {
        console.log('resize');
    });
</script>

Your Environment

• Version used: Materialize 2.2.1
• Browser Name and version: Microsoft Edge Versión 131.0.2903.146 (64 bits)
• Operating System and version (desktop or mobile): Windows 10 Pro (10.0.19045) - desktop

[gselderslaghs]

Thanks for your report, it had to to with method invocations on this within function context, I've included a fix in #594

[PEDROJOSEGIL]

Thank you very much for your quick reply. Hope we'll soon get a new version of Materialize with these adjustments.