Hey everyone, I have a weird bug with htmx. Most of the time it works just fine, but every once in a while the hx-trigger is not triggered by a custom event. When using hyperscript on the same element, it can listen to the same event just fine. Does anyone have an idea why this could be happening? Sending a new event from hyperscript to the hx-trigger does not work either, since htmx ignores that as well. Currently, my workaround is to listen to that event and to htmx:beforeRequest and if beforeRequest is not found in time, I reload the page (since it is likely to work again after a reload) but that is of course a very dirty and undesirable UX. My version is 1.6.1 TLDR: custom event is created but HX-trigger does not listen (every once in a while)

Check whether perhaps you're consuming the event already elsewhere in the DOM structure? Unless you mean it intermittently doesn't respond to the event?

I do use this event in multiple places, but most of the time it goes well. Every one in say 50 reloads it just doesn't. I basically use the event to say "hey something changed", and multiple components on the page react to that. When loading the page for the first time, this event is sent as well to set everything up

That's above my paygrade stuff then, sorry. Hopefully someone else has an idea

I understand, thanks!

How are you creating / triggering the custom event?

With hyperscript, e.g.

send ew:state_changed to closest .edwh-messagebus

And then we listen to it using

hx-trigger="ew:state_changed from:closest .edwh-messagebus"

Is the

.edwh-messagebus

element stable or does it get replaced?

trying to get my head around people calling this simple:

jsx
import React from 'react'
import { useAsyncExtendedState, usePromise } from '../../hooks'
import { update } from '../../API/resource/thing'
import { types } from '../../API/resource/thing'

export const Editor = () => {
  const [ state, setState, extendState ] = useAsyncExtendedState<types.Props>({
    id: `733e26aa-97ea-46d7-b4d4-e556a5f37d68`,
    createdAt: `2021-12-17T12:32:13.981Z`,
    updatedAt: `2021-12-17T12:32:13.981Z`,
    description: `This is a simple but powerful design pattern!`
  })

  const [ updateRequest, requestUpdate ] = usePromise((updateProps: types.UpdateProps) => (
    update(state.id, updateProps).then(response => response.data.props)
  ))

  return (
    <div>
      <div>
        {`Created thing: ${new Date(state.createdAt).toLocaleString()}`}
      </div>

      <div>
        {`Updated thing: ${new Date(state.updatedAt).toLocaleString()}`}
      </div>

      <textarea
        value={state.description}
        onChange={event => extendState({ description: event.target.value })}
      />

      <button onClick={() => extendState(requestUpdate({ description: state.description }))}>
        {updateRequest.status === `pending` ? `Updating thing...` : `Update thing`}
      </button>

      {updateRequest.cancel && (
        <button onClick={() => updateRequest.cancel(`cancelled`)}>
          Cancel update
        </button>
      )}

      {updateRequest.status && (
        <div>
          {`Request status: ${updateRequest.status}`}
        </div>
      )}
      
      {updateRequest.error && (
        <div style={{ color: `red` }}>
          {`Error: ${updateRequest.error.message}`}
        </div>
      )}
    </div>
  )

The edwh-messagebus does not change. I now have a similar issue in hyperscript where sometimes htmx:afterSettle is sometimes not fired. Very strange stuff, especially that it only happens sometimes

can you give me more context on "sometimes not fired"

this sounds like possibly a queueing issue

hyperscript, by default, only queues the latest event

So if an event handler is running and multiple events come in while it is running, only the last event is queued up

Is this per event type or for all events? We do use multiple different events at the same time so maybe some get lost?

It's per

on

.

the queue is per

on

handler

Yes, okay. So we use

on htmx:afterSettle (do some UI stuff)

or e.g.

on htmx:afterSettle log 'settled'

but sometimes the component does show up, but nothing is changed on the UI or logged

where is this event handler located?

In this case on the same div as the hx-trigger and hx-post. Could that be the issue?

we trigger

htmx:afterSettle

on the settled content: https://github.com/bigskysoftware/htmx/blob/e3c0dadbe7de09fde4df32fb7d730ab8385379b4/src/htmx.js#L2592

so it would be imporant that this content is inside the element w/ the event handler in it

Yes, it is structured like that. And most of the time it works, but sometimes it just randomly does not

😑

Just like the hx-trigger I mentioned before, just random times it does not work

event-driven development is great when it works

Are you willing to debug the issue w/ a modified version of htmx?

and are there any patterns to the bug?