hx-trigger: "from:find" not working as documented

[dzerrenner]

The following example code:

<div hx-get="..." hx-trigger="click from:find .item">
  <div class=".item"></div>
</div>

throws an htmx:syntax:error at the browser console and does not trigger as expected on click on the inner item. I can't use the inner div to trigger, because it listens to its own event and has its own hx- attributes.

The docs or functionality seem off here: https://htmx.org/attributes/hx-trigger/, section "Standard event modifiers; from; find"

[denysvega]

@dzerrenner I just checked the sources and there are a bug. The parser reads the from: and it stops on the next white space or comma.

The from syntax may contain some white spaces, so a simple solution is to modify it syntax to support brackets, for example: hx-trigger="click from:{find .item}".

Here is a patch if you want to use it, you will need to download the htmx sources and modify the htmx.js file.

Replace (line 888):

} else if (token === "from" && tokens[0] === ":") {
    tokens.shift();
    triggerSpec.from = consumeUntil(tokens, WHITESPACE_OR_COMMA);
}

With:

} else if (token === "from" && tokens[0] === ":") {
    tokens.shift();
    if (tokens[0] === '{') {
        tokens.shift();
        triggerSpec.from = consumeUntil(tokens, '}').trim();
        tokens.shift();
    } else {
        triggerSpec.from = consumeUntil(tokens, WHITESPACE_OR_COMMA);
    }
}

I hope it helps.

[1cg]

@denysvega that's a great idea, are you interested in contributing a pull request for this?

[denysvega]

@1cg sure!

[sde-cdsp]

Seems like this whitespace issue is still an unresolved topic? I was trying to do hx-trigger="click from:#id input" and was forced to do hx-trigger="click from:#id>x>y>z>input"

[Encephala]

@sde-cdsp I believe that's actually a different issue. The original post wants to use an extended CSS selector, but the whitespace broke parsing of it. I believe that was fixed in 2021 by this commit (so @1cg I do believe this issue can be closed).

You are however correct that your use case isn't possible; any whitespace in a CSS selector besides the space after find, closest etc. will still cause the same parsing error. I ran into this problem as well and implemented the fix suggested by Denys Vega above.

[xhaggi]

I already made a fix in PR https://github.com/bigskysoftware/htmx/pull/1720, but that was rejected. It solves the whitespace issue without introducing a new syntax.