bigskysoftware / htmx

</> htmx - high power tools for HTML
https://htmx.org
Other
38.19k stars 1.3k forks source link

hx-sync not working on multiple elements #2452

Open Ragudos opened 7 months ago

Ragudos commented 7 months ago

I have a markup that contains a search input and tabs of category filters which are radio buttons with a change handler:

 <input name="search" value="{{query}}" hx-get="/discover/api"
    hx-target="#section-of-communities"
    hx-include="[name='category']"
    hx-sync="[name='category']:replace,this:replace"
    id="search-input" type="search" name="search"
    title="Search by name" placeholder="Search by name"
    autocomplete="off" autocapitalize="off"
    hx-trigger="keyup changed delay:250ms, search"
    hx-indicator="#search-loader" />

<label aria-label="{{value}}" class="btn category-filter">
    <input type="radio" name="category" value="{{value}}"
         hx-get="/discover/api" hx-trigger="change"
         hx-include="#search-input"
         hx-sync="[name='category']:replace,#search-input:replace"
         hx-target="#section-of-communities"
         hx-target-error="#nothing" />
    <span>{{name}}</span>
</label>

Expectation: Abort a previous request of elements with attributes [name=category] and id of search-input if we submit a new request.

What's going on:

https://github.com/bigskysoftware/htmx/assets/133567781/297b8a2f-3467-4133-9e66-faecf9460e46

Ragudos commented 7 months ago

It works when I have this markup instead:

 <input name="search" value="{{query}}" hx-get="/discover/api"
    hx-target="#section-of-communities"
    hx-include="[name='category']"
    hx-sync="[name='category']:replace"
    id="search-input" type="search" name="search"
    title="Search by name" placeholder="Search by name"
    autocomplete="off" autocapitalize="off"
    hx-trigger="keyup changed delay:250ms, search"
    hx-indicator="#search-loader" />

<label aria-label="{{value}}" class="btn category-filter">
    <input type="radio" name="category" value="{{value}}"
         hx-get="/discover/api" hx-trigger="change"
         hx-include="#search-input"
         hx-sync="[name='category']:replace"
         hx-target="#section-of-communities"
         hx-target-error="#nothing" />
    <span>{{name}}</span>
</label>

I only left [name='category']:replace on both search input and category filter radio buttons. The problem is, they also sync with the search input despite only having [name='category'].