fix sse-swap removal handling in ext/sse.jssse-swap-removal-handling

2 files changed, 12 insertions, 0 deletions

diff --git a/src/ext/sse.js b/src/ext/sse.js
index f9a2fbaf..88e23d51 100644
--- a/src/ext/sse.js
+++ b/src/ext/sse.js
@@ -145,6 +145,7 @@ This extension adds support for Server Sent Events to htmx.  See /www/extensions
 					// If the body no longer contains the element, remove the listener
 					if (!api.bodyContains(child)) {
 						source.removeEventListener(sseEventName, listener);
+						return;
 					}
 
 					// swap the response into the DOM and trigger a notification
diff --git a/test/ext/sse.js b/test/ext/sse.js
index 5181fe3a..119a627b 100644
--- a/test/ext/sse.js
+++ b/test/ext/sse.js
@@ -5,6 +5,7 @@ describe("sse extension", function() {
         var wasClosed = false;
         var url;
         var mockEventSource = {
+            _listeners: listeners,
             removeEventListener: function(name, l) {
                 listeners[name] = listeners[name].filter(function(elt, idx, arr) {
                     if (arr[idx] === l) {
@@ -149,6 +150,16 @@ describe("sse extension", function() {
         this.eventSource.wasClosed().should.equal(true)
     })
 
+    it('is not listening for events after hx-swap element removed', function() {
+        var div = make('<div hx-ext="sse" sse-connect="/foo">' +
+            '<div id="d1" hx-swap="outerHTML" sse-swap="e1">div1</div>' +
+            '</div>');
+        this.eventSource._listeners["e1"].should.be.lengthOf(1)
+        div.removeChild(byId("d1"));
+        this.eventSource.sendEvent("e1", "Test")
+        this.eventSource._listeners["e1"].should.be.empty
+    })
+
     // sse and hx-trigger handlers are distinct
     it('is closed after removal with no close and activity, sse-swap', function() {
         var div = make('<div hx-get="/test" hx-swap="outerHTML" hx-ext="sse" sse-connect="/foo">' +