Memory: Widgets with "target" or "trigger" leak

[melloware]

This was a major cause of the leak at my client. Any element that has a trigger/target element should remove its widget when its target/trigger is removed from the DOM.

• TieredMenu (any kind that uses trigger)
• Sticky (target)
• OverlayPanel (target)
• BlockUI (target)
• KeyFilter (target)
• Spotlight (target)
• Tooltip (target)
• Resizable (jqTarget)
• DragDrop (jqTarget)
• ContextMenu (jqTarget)
• ColumnToggler (trigger and its datatable)

Reproducer

This is easy to replicate using the showcase:

1. Navigate to Sticky example: https://www.primefaces.org/showcase/ui/misc/sticky.xhtml
2. Open F12 console and lets remove the Toolbar from the DOM with $('#tb').remove();
3. Now take a Memory Dump and you will see the Toolbar was removed from DOM but the p:sticky still has a JS reference to it in its target property which causes the garbage collector to never collect it.
4. Run PrimeFaces.destoyDetachedWidgets()

The 6 buttons, all their DIVS and everything inside the toolbar is now being held in memory as "Detached DOM" elements.

[melloware]

This is just a workaround not the final solution but this fixes it for all components.

$(document).ready(function () {
  for (key in PrimeFaces.widgets) {
    let widget = PrimeFaces.widgets[key];
    if (widget && widget.target instanceof jQuery) {
      widget.target.off("remove.widget").on("remove.widget", function () {
        PrimeFaces.detachedWidgets.push(widget.widgetVar);
      });
    }

    if (widget && widget.trigger instanceof jQuery) {
      widget.trigger.off("remove.widget").on("remove.widget", function () {
        PrimeFaces.detachedWidgets.push(widget.widgetVar);
      });
    }
  }
});