Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

hx-sync not working on multiple elements #2452

Open
Ragudos opened this issue Apr 1, 2024 · 1 comment
Open

hx-sync not working on multiple elements #2452

Ragudos opened this issue Apr 1, 2024 · 1 comment

Comments

@Ragudos
Copy link

Ragudos commented Apr 1, 2024

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:

2024-04-01.19-24-07.mp4
@Ragudos
Copy link
Author

Ragudos commented Apr 1, 2024

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'].

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant