mirror of
https://github.com/bigskysoftware/htmx.git
synced 2025-09-27 13:01:03 +00:00
[Bugfix] Fix hx-trigger changed
modifier along from
clause (#1571)
Fix hx-trigger changed modifier along from clause #1565
This commit is contained in:
parent
a29403f4b7
commit
6d1adc853f
13
src/htmx.js
13
src/htmx.js
@ -1411,9 +1411,12 @@ return (function () {
|
||||
} else {
|
||||
eltsToListenOn = [elt];
|
||||
}
|
||||
// store the initial value of the element so we can tell if it changes
|
||||
// store the initial values of the elements, so we can tell if they change
|
||||
if (triggerSpec.changed) {
|
||||
elementData.lastValue = elt.value;
|
||||
eltsToListenOn.forEach(function (eltToListenOn) {
|
||||
var eltToListenOnData = getInternalData(eltToListenOn);
|
||||
eltToListenOnData.lastValue = eltToListenOn.value;
|
||||
})
|
||||
}
|
||||
forEach(eltsToListenOn, function (eltToListenOn) {
|
||||
var eventListener = function (evt) {
|
||||
@ -1453,11 +1456,11 @@ return (function () {
|
||||
}
|
||||
}
|
||||
if (triggerSpec.changed) {
|
||||
if (elementData.lastValue === elt.value) {
|
||||
var eltToListenOnData = getInternalData(eltToListenOn)
|
||||
if (eltToListenOnData.lastValue === eltToListenOn.value) {
|
||||
return;
|
||||
} else {
|
||||
elementData.lastValue = elt.value;
|
||||
}
|
||||
eltToListenOnData.lastValue = eltToListenOn.value
|
||||
}
|
||||
if (elementData.delayed) {
|
||||
clearTimeout(elementData.delayed);
|
||||
|
@ -42,6 +42,74 @@ describe("hx-trigger attribute", function(){
|
||||
div.innerHTML.should.equal("Requests: 1");
|
||||
});
|
||||
|
||||
it('changed modifier works along from clause with single input', function()
|
||||
{
|
||||
var requests = 0;
|
||||
this.server.respondWith("GET", "/test", function (xhr) {
|
||||
requests++;
|
||||
xhr.respond(200, {}, "Requests: " + requests);
|
||||
});
|
||||
var input = make('<input type="text"/>');
|
||||
make('<div hx-trigger="click changed from:input" hx-target="#d1" hx-get="/test"></div>')
|
||||
var div = make('<div id="d1"></div>');
|
||||
input.click();
|
||||
this.server.respond();
|
||||
div.innerHTML.should.equal("");
|
||||
input.click();
|
||||
this.server.respond();
|
||||
div.innerHTML.should.equal("");
|
||||
input.value = "bar";
|
||||
input.click();
|
||||
this.server.respond();
|
||||
div.innerHTML.should.equal("Requests: 1");
|
||||
input.click();
|
||||
this.server.respond();
|
||||
div.innerHTML.should.equal("Requests: 1");
|
||||
});
|
||||
|
||||
it('changed modifier works along from clause with two inputs', function()
|
||||
{
|
||||
var requests = 0;
|
||||
this.server.respondWith("GET", "/test", function (xhr) {
|
||||
requests++;
|
||||
xhr.respond(200, {}, "Requests: " + requests);
|
||||
});
|
||||
var input1 = make('<input type="text"/>');
|
||||
var input2 = make('<input type="text"/>');
|
||||
make('<div hx-trigger="click changed from:input" hx-target="#d1" hx-get="/test"></div>')
|
||||
var div = make('<div id="d1"></div>');
|
||||
|
||||
input1.click();
|
||||
this.server.respond();
|
||||
div.innerHTML.should.equal("");
|
||||
input2.click();
|
||||
this.server.respond();
|
||||
div.innerHTML.should.equal("");
|
||||
|
||||
input1.value = "bar";
|
||||
input2.click();
|
||||
this.server.respond();
|
||||
div.innerHTML.should.equal("");
|
||||
input1.click();
|
||||
this.server.respond();
|
||||
div.innerHTML.should.equal("Requests: 1");
|
||||
|
||||
input1.click();
|
||||
this.server.respond();
|
||||
div.innerHTML.should.equal("Requests: 1");
|
||||
input2.click();
|
||||
this.server.respond();
|
||||
div.innerHTML.should.equal("Requests: 1");
|
||||
|
||||
input2.value = "foo";
|
||||
input1.click();
|
||||
this.server.respond();
|
||||
div.innerHTML.should.equal("Requests: 1");
|
||||
input2.click();
|
||||
this.server.respond();
|
||||
div.innerHTML.should.equal("Requests: 2");
|
||||
});
|
||||
|
||||
it('once modifier works', function()
|
||||
{
|
||||
var requests = 0;
|
||||
|
Loading…
x
Reference in New Issue
Block a user