Multi-swap issue - Githubissues

Hi there!

I'm running into an issue that I'm unable to see what I'm doing wrong because I'm not getting any errors at all, so if at least could see an error then I could possibly chase the problem with some different approach. So here's what I have done so far. I've correctly loaded the multi-swap extension as described here: https://htmx.org/extensions/multi-swap/

The following is a snippet that contains the block that interacts with HTMX (note that this is a Flask app and the templating engine is Jinja2):

<div class="col-sm-1 ps-0 pe-0">
  <button id="show-password" class="btn btn-warning btn-sm"
    hx-get="{{ url_for('api.get_password', database_name=context.database_name, entry_id=context.entry.id, show=True) }}"
    hx-swap="multi:#password,#show-password:outerHTML"
  >
    <i class="bi bi-eye"></i>
  </button>
</div>

The above snippet is calling the backend which responds this template (below is the full raw template that processes Jinja2, I called this template password.html):

{% if context.show %}
  <input class="form-control form-control-sm" type="text"
    id="password" name="password" value="{{ context.entry.password }}" autocomplete="off" disabled readonly
  >
{% else %}
  <input class="form-control form-control-sm" type="password"
    id="password" name="password" value="●●●●●●●●●●" autocomplete="off" disabled readonly
  >
{% endif %}

<button id="show-password" class="btn btn-warning btn-sm"
  hx-get="{{ url_for('api.get_password', database_name=context.database_name, entry_id=context.entry.id, show=not context.show) }}"
  hx-swap="multi:#password,#show-password:outerHTML"
>
  <i class="bi bi-eye"></i>
</button>

Basically what I'm trying to do is a show/hide of an input, but swapping two things: the input itself and the button that has been clicked (because the show=not context.show alternates to True/False requesting each time to the backend to get a masked input or a plain one).

What's the response? If I open the Network's tab in Firefox I can clearly see the correct response from the backend but after that nothing else happens, that is: HTMX seems to do nothing else after receiving the response. No errors at all and a valid response. The only thing that I'm thinking is that maybe multi-swap can't operate on the same element that triggered the AJAX request (but I don't believe that's the case because the regular swap can target itself: the same element that triggers the request), note that both in the first snippet and the response coming from password.html target the element whose id is password and show-password (these elements are present in the HTML if I open the Firefox inspector). I think I'm not doing anything strange and looks pretty much the example from the documentation...

Thanks in advance for the help, Lucas.

bigskysoftware / htmx

Multi-swap issue #1418