remove extra hx-swap-oob attribute that is not used in the page (#2823)

remove extra hx-swap-oob tag that is not used in the page
bigskysoftware · Oct 3, 2024 · 0e1eeec · 0e1eeec
1 parent b23b2f0
commit 0e1eeec
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 2 deletions.
diff --git a/src/htmx.js b/src/htmx.js
@@ -1419,6 +1419,8 @@ var htmx = (function() {
     } else {
       swapStyle = oobValue
     }
+    oobElement.removeAttribute('hx-swap-oob')
+    oobElement.removeAttribute('data-hx-swap-oob')
 
     const targets = getDocument().querySelectorAll(selector)
     if (targets) {

diff --git a/test/attributes/hx-swap-oob.js b/test/attributes/hx-swap-oob.js
@@ -66,6 +66,28 @@ describe('hx-swap-oob attribute', function() {
     })
   }
 
+  it('handles remvoing hx-swap-oob tag', function() {
+    this.server.respondWith('GET', '/test', "Clicked<div id='d1' data-hx-swap-oob='true'>Swapped3</div>")
+    var div = make('<div data-hx-get="/test">click me</div>')
+    make('<div id="d1"></div>')
+    div.click()
+    this.server.respond()
+    div.innerHTML.should.equal('Clicked')
+    byId('d1').innerHTML.should.equal('Swapped3')
+    byId('d1').hasAttribute('hx-swap-oob').should.equal(false)
+  })
+
+  it('handles remvoing data-hx-swap-oob tag', function() {
+    this.server.respondWith('GET', '/test', "Clicked<div id='d1' data-hx-swap-oob='true'>Swapped3</div>")
+    var div = make('<div data-hx-get="/test">click me</div>')
+    make('<div id="d1"></div>')
+    div.click()
+    this.server.respond()
+    div.innerHTML.should.equal('Clicked')
+    byId('d1').innerHTML.should.equal('Swapped3')
+    byId('d1').hasAttribute('data-hx-swap-oob').should.equal(false)
+  })
+
   it('handles no id match properly', function() {
     this.server.respondWith('GET', '/test', "Clicked<div id='d1' hx-swap-oob='true'>Swapped2</div>")
     var div = make('<div hx-get="/test">click me</div>')
@@ -155,6 +177,7 @@ describe('hx-swap-oob attribute', function() {
 
   it('swaps into all targets that match the selector (outerHTML)', function() {
     var oobSwapContent = '<div class="new-target" hx-swap-oob="outerHTML:.target">Swapped9</div>'
+    var finalContent = '<div class="new-target">Swapped9</div>'
     this.server.respondWith('GET', '/test', '<div>Clicked</div>' + oobSwapContent)
     var div = make('<div hx-get="/test">click me</div>')
     make('<div id="d1"><div>No swap</div></div>')
@@ -163,8 +186,8 @@ describe('hx-swap-oob attribute', function() {
     div.click()
     this.server.respond()
     byId('d1').innerHTML.should.equal('<div>No swap</div>')
-    byId('d2').innerHTML.should.equal(oobSwapContent)
-    byId('d3').innerHTML.should.equal(oobSwapContent)
+    byId('d2').innerHTML.should.equal(finalContent)
+    byId('d3').innerHTML.should.equal(finalContent)
   })
 
   it('oob swap delete works properly', function() {