Memory Leak: `material_select` never removes global `click` handlers

Description

$.material_select installs multiple global click handlers on window, but never cleans them up:

https://github.com/Dogfalo/materialize/blob/28af85de90bad5e7347d7882116fdfca098659f2/js/forms.js#L641

This results in a memory leak in single-page applications that call this function when rendering a view. Every time the function is called, new global click handlers are added. Since they are never removed, the browser cannot garbage collect the handler or any data within its closure (which includes DOM NodeLists within jQuery objects).

Is there a way to either avoid a global click handler, to only install a single global click handler, or to clean up global click handlers at some point?

Repro Steps

N/A

Screenshots / Codepen

N/A

[r3wt]

@jvilk

the lifecycle of SPA’s are beyond the scope of jQuery plugins. one approach you might take is to override jQuery’s init() method and use it to maintain a list of selectors with bound events, and use the well known hack to remove all events.

override $.fn.init:

var watchedSelectors = [];
$.fn.init = function(selector,context)
{
    //you could maybe add some logic to see if you want to watch it or not.
    var jQinstance = new jQselector(selector,context||window.document,$);
    
    watchedSelectors.push(selector);

    return jQinstance;
};

remove events when needed:

for(var i=0;i<watchedSelectors.length;i++){
        $(watchedSelectors[i]).find("*").addBack().off();
}
watchedSelectors.length = 0;

you could probably take it a bit further and remove from specific selectors, but i’ll leave that exercise up to you.

[fega]

@r3wt thanks! 😄