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

Fix stale form references (#1820)

Browse Source 
* 🐛 ensures form reference is accurate

* ✅ Adds test

* 🐛 Fixes null checks

* Revert www updates

This reverts commit d2d14056e2635688fdcb0e6abe572034f77c0bef.

* Revert www updates

This reverts commit 3de585e02997a7877f47ef84f6c2f1a5fcc91ac3.

* ♻️ Refactors code

* ✅ Passes tests
This commit is contained in:
Eric Kwoka 2023-11-01 02:32:58 +04:00 committed by GitHub
parent 225d8d8cac
commit bdcb040a2f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 54 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/htmx.js
View File

@ -1912,32 +1912,39 @@ return (function () {
} }
} }
function initButtonTracking(elt) { // Handle submit buttons/inputs that have the form attribute set
// Handle submit buttons/inputs that have the form attribute set // see https://developer.mozilla.org/docs/Web/HTML/Element/button
// see https://developer.mozilla.org/docs/Web/HTML/Element/button function maybeSetLastButtonClicked(evt) {
var form = resolveTarget("#" + getRawAttribute(elt, "form")) || closest(elt, "form") var elt = closest(evt.target, "button, input[type='submit']");
if (!form) { var internalData = getRelatedFormData(evt)
return if (internalData) {
internalData.lastButtonClicked = elt;
} }
};
var maybeSetLastButtonClicked = function (evt) { function maybeUnsetLastButtonClicked(evt){
var elt = closest(evt.target, "button, input[type='submit']"); var internalData = getRelatedFormData(evt)
if (elt !== null) { if (internalData) {
var internalData = getInternalData(form); internalData.lastButtonClicked = null;
internalData.lastButtonClicked = elt; }
} }
}; function getRelatedFormData(evt) {
var elt = closest(evt.target, "button, input[type='submit']");
if (!elt) {
return;
}
var form = resolveTarget('#' + getRawAttribute(elt, 'form')) || closest(elt, 'form');
if (!form) {
return;
}
return getInternalData(form);
}
function initButtonTracking(elt) {
// need to handle both click and focus in: // need to handle both click and focus in:
// focusin - in case someone tabs in to a button and hits the space bar // focusin - in case someone tabs in to a button and hits the space bar
// click - on OSX buttons do not focus on click see https://bugs.webkit.org/show_bug.cgi?id=13724 // click - on OSX buttons do not focus on click see https://bugs.webkit.org/show_bug.cgi?id=13724
elt.addEventListener('click', maybeSetLastButtonClicked) elt.addEventListener('click', maybeSetLastButtonClicked)
elt.addEventListener('focusin', maybeSetLastButtonClicked) elt.addEventListener('focusin', maybeSetLastButtonClicked)
elt.addEventListener('focusout', function(evt){ elt.addEventListener('focusout', maybeUnsetLastButtonClicked)
var internalData = getInternalData(form);
internalData.lastButtonClicked = null;
})
} }
function countCurlies(line) { function countCurlies(line) {

27
test/core/ajax.js
View File

@ -1284,5 +1284,32 @@ describe("Core htmx AJAX Tests", function(){
byId("submit").click(); byId("submit").click();
this.server.respond(); this.server.respond();
responded.should.equal(true); responded.should.equal(true);
it("can associate submit buttons from outside a form with the current version of the form after swap", function(){
const template = '<form ' +
'id="hello" ' +
'hx-target="#hello" ' +
'hx-select="#hello" ' +
'hx-swap="outerHTML" ' +
'hx-post="/test">\n' +
'<input id="input" type="text" name="name" />\n' +
'<button name="value" type="submit">Submit</button>\n' +
'</form>\n' +
'<button id="outside" name="outside" form="hello" type="submit">Outside</button>';
var values
this.server.respondWith("/test", function (xhr) {
values = getParameters(xhr);
xhr.respond(200, {}, template);
});
make(template);
const button = byId("outside");
button.focus();
button.click();
this.server.respond();
values.should.deep.equal({name: "", outside: ""});
button.focus();
button.click();
this.server.respond();
values.should.deep.equal({name: "", outside: ""});
}) })
}) })