don't leak ref event listeners (#3787)

Relates to: #3784

Author: SteffenDE

assets/js/phoenix_live_view/constants.js

@@ -20,6 +20,7 @@ export const PHX_LINK_STATE = "data-phx-link-state";
 export const PHX_REF_LOADING = "data-phx-ref-loading";
 export const PHX_REF_SRC = "data-phx-ref-src";
 export const PHX_REF_LOCK = "data-phx-ref-lock";
+export const PHX_PENDING_REFS = "phx-pending-refs";
 export const PHX_TRACK_UPLOADS = "track-uploads";
 export const PHX_UPLOAD_REF = "data-phx-upload-ref";
 export const PHX_PREFLIGHTED_REFS = "data-phx-preflighted-refs";

assets/js/phoenix_live_view/element_ref.js

@@ -2,6 +2,7 @@ import {
   PHX_REF_LOADING,
   PHX_REF_LOCK,
   PHX_REF_SRC,
+  PHX_PENDING_REFS,
   PHX_EVENT_CLASSES,
   PHX_DISABLED,
   PHX_READONLY,
@@ -42,6 +43,12 @@ export default class ElementRef {
 
   maybeUndo(ref, phxEvent, eachCloneCallback) {
     if (!this.isWithin(ref)) {
+      // we cannot undo the lock / loading now, as there is a newer one already set;
+      // we need to store the original ref we tried to send the undo event later
+      DOM.updatePrivate(this.el, PHX_PENDING_REFS, [], (pendingRefs) => {
+        pendingRefs.push(ref);
+        return pendingRefs;
+      });
       return;
     }
 
@@ -51,6 +58,29 @@ export default class ElementRef {
     // undo loading states
     this.undoLoading(ref, phxEvent);
 
+    // ensure undo events are fired for pending refs that
+    // are resolved by the current ref, otherwise we'd leak event listeners
+    DOM.updatePrivate(this.el, PHX_PENDING_REFS, [], (pendingRefs) => {
+      return pendingRefs.filter((pendingRef) => {
+        let opts = {
+          detail: { ref: pendingRef, event: phxEvent },
+          bubbles: true,
+          cancelable: false,
+        };
+        if (this.loadingRef && this.loadingRef > pendingRef) {
+          this.el.dispatchEvent(
+            new CustomEvent(`phx:undo-loading:${pendingRef}`, opts),
+          );
+        }
+        if (this.lockRef && this.lockRef > pendingRef) {
+          this.el.dispatchEvent(
+            new CustomEvent(`phx:undo-lock:${pendingRef}`, opts),
+          );
+        }
+        return pendingRef > ref;
+      });
+    });
+
     // clean up if fully resolved
     if (this.isFullyResolvedBy(ref)) {
       this.el.removeAttribute(PHX_REF_SRC);