[SOLVED] htmx: Selecting multiple classes in hx-trigger

htmx: Selecting multiple classes in hx-trigger

I have the following code (simplified):

<div hx-post="/handle" hx-trigger="click from:.test1,.test2" hx-swap="outerHTML">
    <div class="checkboxes">
        <div>
            <input type="checkbox" id="checkbox1" class="test1" name="checkbox1" checked/>
            <label for="checkbox1">Test 1</label>
        </div>
        <div>
            <input type="checkbox" id="checkbox2" class="test2" name="checkbox2" checked />
            <label for="checkbox2">Test 2</label>
        </div>
    </div>
</div>

The problem is that the request is only triggered if I click on test1 checkbox, if I click on the second nothing happens. I tried multiple syntaxes (including the one from this reddit post) but nothing works. I tried swapping the classes in the hx-trigger, it causes only the second checkbox to work, so it means only the first class is used. I could use the same class on all elements, but I want to figure out the way to specify multiple classes.

Solution

The comma has a special meaning in the hx-trigger attrib. Maybe try escaping the selector by putting it in parens: hx-trigger="click from:(.test1, .test2)"

Just to write down the answer from a comment under the original question.

Also from the HTMX website - https://htmx.org/attributes/hx-trigger/

In order to pass a CSS selector that contains whitespace (e.g. form input) to the from- or target-modifier, surround the selector in parentheses or curly brackets (e.g. from:(form input) or from:closest (form input))