itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2025-10-02 23:35:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Only cancel clicks and submits

Browse Source 
fixes https://github.com/bigskysoftware/htmx/issues/588
This commit is contained in:
carson 2021-11-12 16:43:28 -07:00
parent 2944bf372c
commit e7e7b1cb37
4 changed files with 27 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/htmx.js
View File

@ -989,11 +989,20 @@ return (function () {
} }
} }
function shouldCancel(elt) { function shouldCancel(evt, elt) {
return elt.tagName === "FORM" || if (evt.type === "submit" || evt.type === "click") {
(matches(elt, 'input[type="submit"], button') && closest(elt, 'form') !== null) || if (elt.tagName === "FORM") {
(elt.tagName === "A" && elt.href && (elt.getAttribute('href') === '#' || return true;
elt.getAttribute('href').indexOf("#") !== 0)); }
if (matches(elt, 'input[type="submit"], button') && closest(elt, 'form') !== null) {
return true;
}
if (elt.tagName === "A" && elt.href &&
(elt.getAttribute('href') === '#' || elt.getAttribute('href').indexOf("#") !== 0)) {
return true;
}
}
return false;
} }
function ignoreBoostedAnchorCtrlClick(elt, evt) { function ignoreBoostedAnchorCtrlClick(elt, evt) {
@ -1029,7 +1038,7 @@ return (function () {
if (ignoreBoostedAnchorCtrlClick(elt, evt)) { if (ignoreBoostedAnchorCtrlClick(elt, evt)) {
return; return;
} }
if (explicitCancel || shouldCancel(elt)) { if (explicitCancel || shouldCancel(evt, elt)) {
evt.preventDefault(); evt.preventDefault();
} }
if (maybeFilterEvent(triggerSpec, evt)) { if (maybeFilterEvent(triggerSpec, evt)) {

5
test/attributes/hx-boost.js
View File

@ -70,6 +70,11 @@ describe("hx-boost attribute", function() {
} }
}) })
it('anchors w/ explicit targets are not boosted', function () {
var a = make('<a hx-target="this" hx-boost="true" id="a1" href="/test" target="_blank">Foo</a>');
var internalData = htmx._("getInternalData")(a);
should.equal(undefined, internalData.boosted);
})
it('includes an HX-Boosted Header', function() it('includes an HX-Boosted Header', function()
{ {

12
test/core/internals.js
View File

@ -87,24 +87,24 @@ describe("Core htmx internals Tests", function() {
it("tags respond correctly to shouldCancel", function() { it("tags respond correctly to shouldCancel", function() {
var anchorThatShouldCancel = make("<a href='/foo'></a>"); var anchorThatShouldCancel = make("<a href='/foo'></a>");
htmx._("shouldCancel")(anchorThatShouldCancel).should.equal(true); htmx._("shouldCancel")({type:'click'}, anchorThatShouldCancel).should.equal(true);
var anchorThatShouldCancel = make("<a href='#'></a>"); var anchorThatShouldCancel = make("<a href='#'></a>");
htmx._("shouldCancel")(anchorThatShouldCancel).should.equal(true); htmx._("shouldCancel")({type:'click'}, anchorThatShouldCancel).should.equal(true);
var anchorThatShouldNotCancel = make("<a href='#foo'></a>"); var anchorThatShouldNotCancel = make("<a href='#foo'></a>");
htmx._("shouldCancel")(anchorThatShouldNotCancel).should.equal(false); htmx._("shouldCancel")({type:'click'}, anchorThatShouldNotCancel).should.equal(false);
var form = make("<form></form>"); var form = make("<form></form>");
htmx._("shouldCancel")(form).should.equal(true); htmx._("shouldCancel")({type:'submit'}, form).should.equal(true);
var form = make("<form><input id='i1' type='submit'></form>"); var form = make("<form><input id='i1' type='submit'></form>");
var input = byId("i1"); var input = byId("i1");
htmx._("shouldCancel")(input).should.equal(true); htmx._("shouldCancel")({type:'click'}, input).should.equal(true);
var form = make("<form><button id='b1' type='submit'></form>"); var form = make("<form><button id='b1' type='submit'></form>");
var button = byId("b1"); var button = byId("b1");
htmx._("shouldCancel")(button).should.equal(true); htmx._("shouldCancel")({type:'click'}, button).should.equal(true);
}) })

6
test/scratch.html
View File

@ -58,14 +58,10 @@ Autorespond: <input id="autorespond" type="checkbox" onclick="toggleAutoRespond(
<hr/> <hr/>
<div id="work-area" hx-history-elt> <div id="work-area" hx-history-elt>
<button hx-get="/foo" id="my-button">My Button</button> <a id="a1" hx-boost="true" href="#" target="">Asdf</a>
</div> </div>
<script> <script>
htmx.on('#my-button', 'click', function (evt) {
xhr.abort();
});
</script> </script>
</body> </body>
</html> </html>