diff --git a/src/htmx.js b/src/htmx.js index aa9908f9b..016ae7cd9 100644 --- a/src/htmx.js +++ b/src/htmx.js @@ -5116,7 +5116,7 @@ var htmx = (function() { "[hx-trigger='restored'],[data-hx-trigger='restored']" ) body.addEventListener('htmx:abort', function(evt) { - const target = evt.target + const target = (/** @type {CustomEvent} */(evt)).detail.elt || evt.target const internalData = getInternalData(target) if (internalData && internalData.xhr) { internalData.xhr.abort() diff --git a/test/core/shadowdom.js b/test/core/shadowdom.js index ec2ca0f93..d38ab5017 100644 --- a/test/core/shadowdom.js +++ b/test/core/shadowdom.js @@ -1341,4 +1341,64 @@ describe('Core htmx Shadow DOM Tests', function() { getWorkArea().innerHTML.should.equal('Clicked!') chai.expect(getWorkArea().shadowRoot).to.be.a('null') }) + + it('hx-sync works properly in shadow DOM', function() { + var count = 0 + this.server.respondWith('GET', '/test', function(xhr) { + xhr.respond(200, {}, 'Click ' + count++) + }) + make('
' + + '
') + var b1 = byId('b1') + var b2 = byId('b2') + b1.click() + b2.click() + this.server.respond() + this.server.respond() + b1.innerHTML.should.equal('Click 0') + b2.innerHTML.should.equal('Initial') + }) + + it('can abort a request programmatically in shadow DOM', function() { + var count = 0 + var abortedCount = 0 + this.server.respondWith('GET', '/test', function(xhr) { + xhr.respond(200, {}, 'Click ' + count++) + }) + make('
' + + '
') + var b1 = byId('b1') + var b2 = byId('b2') + + // Listen for abort events to verify they're working + htmx.on(b1, 'htmx:abort', function() { abortedCount++ }) + + b1.click() + b2.click() + + htmx.trigger(b1, 'htmx:abort') + + this.server.respond() + this.server.respond() + b1.innerHTML.should.equal('Initial') + b2.innerHTML.should.equal('Click 0') + abortedCount.should.equal(1) + }) + + it('hx-sync abort strategy works in shadow DOM', function() { + var count = 0 + this.server.respondWith('GET', '/test', function(xhr) { + xhr.respond(200, {}, 'Click ' + count++) + }) + make('
' + + '
') + var b1 = byId('b1') + var b2 = byId('b2') + b1.click() + b2.click() + this.server.respond() + this.server.respond() + b1.innerHTML.should.equal('Initial') + b2.innerHTML.should.equal('Click 0') + }) })