Skip to content

Commit 022855e

Browse files
manwithacatclaude
andcommitted
fix: support textContent swap style for hx-swap-oob (#3563)
swapWithStyle() handled none, outerHTML, afterbegin, beforebegin, beforeend, afterend, and delete, but had no case for textContent. Falling through to the default branch caused textContent OOB swaps to be treated as innerHTML, parsing the response body as HTML instead of inserting it as literal text. Mirrors the main-swap textContent handling, which sets target.textContent directly without parsing as HTML. Fixes #3563 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1 parent d53932d commit 022855e

2 files changed

Lines changed: 25 additions & 0 deletions

File tree

src/htmx.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1818,6 +1818,9 @@ var htmx = (function() {
18181818
case 'delete':
18191819
swapDelete(target)
18201820
return
1821+
case 'textContent':
1822+
target.textContent = fragment.textContent
1823+
return
18211824
default:
18221825
var extensions = getExtensions(elt)
18231826
for (let i = 0; i < extensions.length; i++) {

test/attributes/hx-swap-oob.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,28 @@ describe('hx-swap-oob attribute', function() {
128128
byId('d1').innerHTML.should.equal('Swapped5')
129129
})
130130

131+
it('handles textContent response properly', function() {
132+
this.server.respondWith('GET', '/test', "Clicked<div id='d1' hx-swap-oob='textContent'><h1>Swapped</h1></div>")
133+
var div = make('<div hx-get="/test">click me</div>')
134+
make('<div id="d1"><span>old</span></div>')
135+
div.click()
136+
this.server.respond()
137+
div.innerHTML.should.equal('Clicked')
138+
byId('d1').innerHTML.should.equal('Swapped')
139+
byId('d1').textContent.should.equal('Swapped')
140+
})
141+
142+
it('handles textContent oob swap with selector', function() {
143+
this.server.respondWith('GET', '/test', "<div>Clicked</div><div hx-swap-oob='textContent:#d1'><em>new</em></div>")
144+
var div = make('<div hx-get="/test">click me</div>')
145+
make('<div id="d1"><strong>old</strong></div>')
146+
div.click()
147+
this.server.respond()
148+
div.innerHTML.should.equal('<div>Clicked</div>')
149+
byId('d1').innerHTML.should.equal('new')
150+
byId('d1').textContent.should.equal('new')
151+
})
152+
131153
it('oob swaps can be nested in content with config {"allowNestedOobSwaps": true}', function() {
132154
htmx.config.allowNestedOobSwaps = true
133155
this.server.respondWith('GET', '/test', "<div>Clicked<div id='d1' foo='bar' hx-swap-oob='innerHTML'>Swapped6</div></div>")

0 commit comments

Comments
 (0)