hx-trigger with custom event triggers on other events

[BrendanMartin]

I'm dispatching an event from an alpine.js component like so: this.$dispatch('auth', {token})

Then I'm using the event as a trigger like this:

  <div hx-post="/login" hx-trigger="auth from:body" hx-vals="js:{...event.detail}">
      <input type="text" hx-post="/check-username" hx-trigger="changed">
  </div>

The issue is that the input change triggers the parent div hx-vals evaluation; I get an error that 'detail' is undefined.

Is this expected? I thought the parent div would only trigger from the "auth" event.

[Telroshan]

Hey,
hx-vals is inherited by default, which is likely why you're getting it evaluated for the child input ; I think that instead of being the parent div that gets its hx-vals evaluated, it's simply the input that inherits the hx-vals from its parent div, thus gets its evaluated for itself.
I think you could add hx-vals="unset" to your input to fix this

Also, is it expected to use hx-trigger="changed" here? You might want to use the standard event change instead, as changed is a modifier keyword that htmx supports, but that still has to complement an event name

Hope this helps!

[BrendanMartin]

Okay, thanks for the help!