Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion src/htmx.js
Original file line number Diff line number Diff line change
Expand Up @@ -2435,7 +2435,9 @@ var htmx = (function() {
if (elt.form && elt.type === 'submit') {
return true
}
if (elt instanceof HTMLAnchorElement && elt.href &&
elt = elt.closest('a')
// @ts-ignore check for a link wrapping the event elt or if elt is a link. elt will be link so href check is fine
if (elt && elt.href &&
(elt.getAttribute('href') === '#' || elt.getAttribute('href').indexOf('#') !== 0)) {
return true
}
Expand Down
5 changes: 5 additions & 0 deletions test/core/internals.js
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,11 @@ describe('Core htmx internals Tests', function() {
htmx._('shouldCancel')({ type: 'submit', target: anchorThatShouldNotCancel }, form).should.equal(false)
htmx._('shouldCancel')({ type: 'click', target: divThatShouldNotCancel }, form).should.equal(false)

// check elements inside links getting click events should cancel parent links
var anchorWithButton = make("<a href='/foo'><button></button></a>")
htmx._('shouldCancel')({ type: 'click', target: anchorWithButton.firstChild }, anchorWithButton).should.equal(true)
htmx._('shouldCancel')({ type: 'click', target: anchorWithButton.firstChild }, anchorWithButton.firstChild).should.equal(true)

form = make('<form id="f1">' +
'<input id="insideInput" type="submit">' +
'<button id="insideFormBtn"></button>' +
Expand Down
42 changes: 42 additions & 0 deletions test/core/regressions.js
Original file line number Diff line number Diff line change
Expand Up @@ -291,4 +291,46 @@ describe('Core htmx Regression Tests', function() {

byId('datefield').click()
})

it('a button clicked inside an htmx enabled link will prevent the link from navigating on click', function(done) {
var defaultPrevented = 'unset'
var link = make('<a href="/foo" hx-get="/foo"><button>test</button></a>')
var button = link.firstChild

htmx.on(link, 'click', function(evt) {
// we need to wait so the state of the evt is finalized
setTimeout(() => {
defaultPrevented = evt.defaultPrevented
try {
defaultPrevented.should.equal(true)
done()
} catch (err) {
done(err)
}
}, 0)
})

button.click()
})

it('a htmx enabled button clicked inside a link will prevent the link from navigating on click', function(done) {
var defaultPrevented = 'unset'
var link = make('<a href="/foo"><button hx-get="/foo">test</button></a>')
var button = link.firstChild

htmx.on(link, 'click', function(evt) {
// we need to wait so the state of the evt is finalized
setTimeout(() => {
defaultPrevented = evt.defaultPrevented
try {
defaultPrevented.should.equal(true)
done()
} catch (err) {
done(err)
}
}, 0)
})

button.click()
})
})