itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2025-09-26 20:40:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixes issue 1537 - OOB does not escape query selector - updated version (#3304)

Browse Source 
* Fixes issue 1537 - OOB does not escape query selector

* Adds test cases for oob swaps where the id contains special characters

* Updated oob multiple elements with the same ID test

* fix(issue-1537): resolved conflicts with master

* fix(issue-1537): fixed codestyle issues

---------

Co-authored-by: Fraser Chapman <fraser.chapman@gmail.com>
Co-authored-by: David Martiník <david.martinik@powerflow.cz>
This commit is contained in:
David Martiník 2025-06-02 18:52:29 +02:00 committed by GitHub
parent 8409ebca3b
commit 730bd8224d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 24 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/htmx.js
View File

@ -1444,7 +1444,7 @@ var htmx = (function() {
*/
function oobSwap(oobValue, oobElement, settleInfo, rootNode) {
rootNode = rootNode || getDocument()
let selector = '#' + getRawAttribute(oobElement, 'id')
let selector = '#' + CSS.escape(getRawAttribute(oobElement, 'id'))
/** @type HtmxSwapStyle */
let swapStyle = 'outerHTML'
if (oobValue === 'true') {

23
test/attributes/hx-swap-oob.js
View File

@ -364,4 +364,27 @@ describe('hx-swap-oob attribute', function() {
div.click()
this.server.respond()
})
it('handles elements with IDs containing special characters properly', function() {
this.server.respondWith('GET', '/test', '<div id="foo-/bar/" hx-swap-oob="innerHTML">Swapped10</div>')
var div = make('<div hx-get="/test">click me</div>')
make('<div id="foo-/bar/">Existing Content</div>')
div.click()
this.server.respond()
var swappedElement = document.querySelector('[id="foo-/bar/"]')
swappedElement.innerHTML.should.equal('Swapped10')
})
it('handles one swap into multiple elements with the same ID properly', function() {
this.server.respondWith('GET', '/test', '<div id="foo-/bar/" hx-swap-oob="innerHTML">Swapped11</div>')
var div = make('<div hx-get="/test">click me</div>')
make('<div id="foo-/bar/">Existing Content 1</div>')
make('<div id="foo-/bar/">Existing Content 2</div>')
div.click()
this.server.respond()
var swappedElements = document.querySelectorAll('[id="foo-/bar/"]')
swappedElements.forEach(function(element) {
element.innerHTML.should.equal('Swapped11')
})
})
})