itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2025-09-27 04:50:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix event not being available in hx-vals/hx-vars when hx-trigger has delay (#3196)

Browse Source 
Fix event not being available in hx-vals/hx-vars when hx-trigger uses delay

Co-authored-by: scrhartley <scrhartley@github.com>
This commit is contained in:
Simon Hartley 2025-04-24 20:58:31 +01:00 committed by GitHub
parent e01027b938
commit db8e5e03cb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 49 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/htmx.js
View File

@ -3782,9 +3782,10 @@ var htmx = (function() {
* @param {string} attr
* @param {boolean=} evalAsDefault
* @param {Object=} values
* @param {Event=} event
* @returns {Object}
*/
function getValuesForElement(elt, attr, evalAsDefault, values) {
function getValuesForElement(elt, attr, evalAsDefault, values, event) {
if (values == null) {
values = {}
}
@ -3810,7 +3811,13 @@ var htmx = (function() {
}
let varsValues
if (evaluateValue) {
varsValues = maybeEval(elt, function() { return Function('return (' + str + ')')() }, {})
varsValues = maybeEval(elt, function() {
if (event) {
return Function('event', 'return (' + str + ')')(event)
} else { // allow window.event to be accessible
return Function('return (' + str + ')')()
}
}, {})
} else {
varsValues = parseJSON(str)
}
@ -3822,7 +3829,7 @@ var htmx = (function() {
}
}
}
return getValuesForElement(asElement(parentElt(elt)), attr, evalAsDefault, values)
return getValuesForElement(asElement(parentElt(elt)), attr, evalAsDefault, values, event)
}
/**
@ -3842,28 +3849,31 @@ var htmx = (function() {
/**
* @param {Element} elt
* @param {*?} expressionVars
* @param {Event=} event
* @param {*?=} expressionVars
* @returns
*/
function getHXVarsForElement(elt, expressionVars) {
return getValuesForElement(elt, 'hx-vars', true, expressionVars)
function getHXVarsForElement(elt, event, expressionVars) {
return getValuesForElement(elt, 'hx-vars', true, expressionVars, event)
}
/**
* @param {Element} elt
* @param {*?} expressionVars
* @param {Event=} event
* @param {*?=} expressionVars
* @returns
*/
function getHXValsForElement(elt, expressionVars) {
return getValuesForElement(elt, 'hx-vals', false, expressionVars)
function getHXValsForElement(elt, event, expressionVars) {
return getValuesForElement(elt, 'hx-vals', false, expressionVars, event)
}
/**
* @param {Element} elt
* @param {Event=} event
* @returns {FormData}
*/
function getExpressionVars(elt) {
return mergeObjects(getHXVarsForElement(elt), getHXValsForElement(elt))
function getExpressionVars(elt, event) {
return mergeObjects(getHXVarsForElement(elt, event), getHXValsForElement(elt, event))
}
/**
@ -4302,7 +4312,7 @@ var htmx = (function() {
if (etc.values) {
overrideFormData(rawFormData, formDataFromObject(etc.values))
}
const expressionVars = formDataFromObject(getExpressionVars(elt))
const expressionVars = formDataFromObject(getExpressionVars(elt, event))
const allFormData = overrideFormData(rawFormData, expressionVars)
let filteredFormData = filterValues(allFormData, elt)

27
test/attributes/hx-vals.js
View File

@ -314,6 +314,33 @@ describe('hx-vals attribute', function() {
}
calledEvent.should.equal(true)
})
it('using js: with hx-vals has event available', function() {
this.server.respondWith('POST', '/vars', function(xhr) {
var params = getParameters(xhr)
params.i1.should.equal('test')
xhr.respond(200, {}, 'Clicked!')
})
var div = make('<div id="test" hx-post="/vars" hx-vals="js:i1:event.target.id"></div>')
div.click()
this.server.respond()
div.innerHTML.should.equal('Clicked!')
})
it('using js: with hx-vals has event available when used with a delay', function(done) {
var params = null
var div = make('<div id="test" hx-post="/vars" hx-vals="js:{i1:event.target.id}" hx-trigger="click delay:10ms"></div>')
htmx.on(div, 'htmx:configRequest', function(evt) {
evt.preventDefault()
params = evt.detail.parameters
}, { once: true })
div.click()
new Promise(resolve => setTimeout(resolve, 20)).then(function() {
params.i1.should.equal('test')
done()
}).catch(done)
})
it('hx-vals works with null values', function() {
this.server.respondWith('POST', '/vars', function(xhr) {
var params = getParameters(xhr)