hx-vals="js: { a: event.target.value }" errs

[reedspool]

Here's an example of the issue https://codepen.io/reedspool-gh/pen/XWYbRXo

For some reason, if clicking multiple times quickly, hx-vals="js:{ test: event.target.value }"> causes an error, TypeError: Cannot read properties of undefined (reading 'target') at htmx.org:1:29917. I narrowed this down to the execution of Function(...)() in getValuesForElement.

If you click the button slowly, the count will appear and then increase. But if you click it twice quickly, an error appears and the HTMX no longer triggers upon clicking this button ever again.

I think this is two problems:

• If there is an htmx error, I think that should never stop the htmx event from triggering on the same element again
• The specific error that appears must be a bug, right?

I narrowed the bug down to the second click having an event value of undefined instead of an actual event as expected.

[jquesada2016]

I'm having a similar issue, except in my case event is always undefined.

[FeliciousX]

the delay causing the event to be undefined definitely caught me off-guard and had to spend some time debugging

@reedspool did u manage to work around it?

[maekoos]

I am currently having this issue myself, although I'm more interested in accessing the element hx-vals is on. It would be really nice to be able to use this like in hx-on...

This could probably be done with a simple .call(elt) here:

htmx/src/htmx.js

Line 3840 in d890547

varsValues = maybeEval(elt, function() { return Function('return (' + str + ')')() }, {})

I will add a PR if a maintainer thinks this is a good idea!

[Telroshan]

Sounds good to me @maekoos, feel free to dive into this and open a PR!