Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Change hx-trigger's changed modifier to work for independent trigger specifications #2891

Merged
merged 2 commits into from
Oct 3, 2024
Merged

Change hx-trigger's changed modifier to work for independent trigger specifications #2891

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
86f0e94
Adjust hx-trigger's changed modifier for multiple sources
jsonn Sep 10, 2024
1dfbe66
Add test case for separate triggers with changed modifier
jsonn Sep 11, 2024
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
26 changes: 13 additions & 13 deletions src/htmx.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -695,7 +695,7 @@ var htmx = (function() {
* @property {boolean} [triggeredOnce]
* @property {number} [delayed]
* @property {number|null} [throttle]
* @property {string} [lastValue]
* @property {WeakMap<HtmxTriggerSpecification,WeakMap<EventTarget,string>>} [lastValue]
* @property {boolean} [loaded]
* @property {string} [path]
* @property {string} [verb]
Expand Down Expand Up @@ -2407,10 +2407,15 @@ var htmx = (function() {
}
// store the initial values of the elements, so we can tell if they change
if (triggerSpec.changed) {
if (!('lastValue' in elementData)) {
elementData.lastValue = new WeakMap()
}
eltsToListenOn.forEach(function(eltToListenOn) {
const eltToListenOnData = getInternalData(eltToListenOn)
if (!elementData.lastValue.has(triggerSpec)) {
elementData.lastValue.set(triggerSpec, new WeakMap())
}
// @ts-ignore value will be undefined for non-input elements, which is fine
eltToListenOnData.lastValue = eltToListenOn.value
elementData.lastValue.get(triggerSpec).set(eltToListenOn, eltToListenOn.value)
})
}
forEach(eltsToListenOn, function(eltToListenOn) {
Expand Down Expand Up @@ -2452,13 +2457,14 @@ var htmx = (function() {
}
}
if (triggerSpec.changed) {
const eltToListenOnData = getInternalData(eltToListenOn)
const node = event.target
// @ts-ignore value will be undefined for non-input elements, which is fine
const value = eltToListenOn.value
if (eltToListenOnData.lastValue === value) {
const value = node.value
const lastValue = elementData.lastValue.get(triggerSpec)
if (lastValue.has(node) && lastValue.get(node) === value) {
return
}
eltToListenOnData.lastValue = value
lastValue.set(node, value)
}
if (elementData.delayed) {
clearTimeout(elementData.delayed)
Expand Down Expand Up @@ -2836,12 +2842,6 @@ var htmx = (function() {

triggerEvent(elt, 'htmx:beforeProcessNode')

// @ts-ignore value will be undefined for non-input elements, which is fine
if (elt.value) {
// @ts-ignore
nodeData.lastValue = elt.value
}

const triggerSpecs = getTriggerSpecs(elt)
const hasExplicitHttpAction = processVerbs(elt, nodeData, triggerSpecs)

Expand Down
87 changes: 87 additions & 0 deletions test/attributes/hx-trigger.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ describe('hx-trigger attribute', function() {
div.innerHTML.should.equal('Requests: 1')
})

// This test and the next one should be kept in sync.
it('changed modifier works along from clause with two inputs', function() {
var requests = 0
this.server.respondWith('GET', '/test', function(xhr) {
Expand Down Expand Up @@ -106,6 +107,92 @@ describe('hx-trigger attribute', function() {
div.innerHTML.should.equal('Requests: 2')
})

// This test and the previous one should be kept in sync.
it('changed modifier counts each triggerspec separately', 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>')
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: 2')

input1.click()
this.server.respond()
div.innerHTML.should.equal('Requests: 2')
input2.click()
this.server.respond()
div.innerHTML.should.equal('Requests: 2')

input2.value = 'foo'
input1.click()
this.server.respond()
div.innerHTML.should.equal('Requests: 2')
input2.click()
this.server.respond()
div.innerHTML.should.equal('Requests: 4')
})

it('separate 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:nth-child(1), click changed from:input:nth-child(2)" 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
this.server.respondWith('GET', '/test', function(xhr) {
Expand Down