hx-on::trigger not working when using delay in hx-trigger

[akBeater]

EDIT:

While working on fixing I noticed an already made merged pr in #2411.
If I understand it correctly it will not fire after the delay. So I have to find another way...

I noticed that the event htmx:trigger does not trigger when using a delay in hx-trigger

Example:

<div id="test"></div>
<button
    hx-get="/content"
    hx-target="#test"
    hx-trigger="click delay:3000ms"
    hx-on::trigger="console.log('trigger')"
>Button</button>

When I click on the button nothing is shown in the console. Using htmx.logAll() you can see that there is no htmxTrigger-event happening.

But this code works perfectly and "trigger" is printed to the console instantly:

<div id="test"></div>
<button
    hx-get="/content"
    hx-target="#test"
    hx-trigger="click"
    hx-on::trigger="console.log('trigger')"
>Button</button>

Use-Case:

I have a project where I server-side validate an input. I'm working with a delay to send a hx-get to the server and respond with an image of a green checkmark or red X. While the request is triggered but delaying, I want to show the user a spinner to signal that the validation is in progress. But this doesn't work if htmx:trigger is not working.

Solution:
I found in the source code that triggerEvent(elt, 'htmx:trigger') is only executed when not using a delay. One may argue that the event htmx:trigger should be executed when the delay is finished, but I think it is more suitable before the delay. Otherwise you could just use htmx:beforeRequest.

It may relates to #1845.

I also just found that htmx:trigger isn't fired in another case:

• Working: hx-trigger="input"
• Working: hx-trigger="input changed"
• Not working: hx-trigger="input changed delay:100ms"

I haven't proceeded to test other modifiers. From the documentation, I would expect htmx:trigger to fire under all the conditions that hx-trigger would normally cause an AJAX request, but it doesn't.

Originally posted by @apiontek in #1845 (comment)