hx-indicator not working as expected

[ripplethor]

When either of the buttons is clicked, the indicators on both buttons appear because the hx-request is being added to the form and not the specified id ( #indicator1 or #indicator2 ). I am using version 2.02

<form hx-post="/submit">

  <button action="submit" name="action" value="action1" hx-indicator="#indicator1">
    Button 1
    <span id="indicator1" class="htmx-indicator">🔄</span>
  </button>

  <button action="submit" name="action" value="action2" hx-indicator="#indicator2">
    Button 2
    <span id="indicator2" class="htmx-indicator">🔄</span>
  </button>
</form>

[MichaelWest22]

I think what your seeing would be the expected behavior. Both of those buttons are not htmx controlled buttons and are just form submit buttons that trigger the hx-post on the form so it is the form that needs the indicators displayed and not the buttons. I would test moving the hx-post to the button to see if firing the post from the button element instead solves your issue.

[melkishengue]

@MichaelWest22 it might be part of the problem, but something is definitely not working properly with the hx-indicator. I have the same behavior with 2 buttons managed by htmx:

<button hx-on:htmx:after-request="htmx.trigger('#root-section-project-page', 'projectUpdated')" hx-indicator="#loading1" hx-delete="/items/123" hx-target="this" hx-swap="innerHTML transition:true">
	Delete Item

	<span  class="loading loading-ring loading-sm htmx-indicator" id="loading1"></span>
</button>

<button hx-on:htmx:after-request="htmx.trigger('#root-section-project-page', 'projectUpdated')" hx-indicator="#loading2" hx-delete="/items/123" hx-target="this" hx-swap="innerHTML transition:true">
	Delete Item

	<span  class="loading loading-ring loading-sm htmx-indicator" id="loading2"></span>
</button>

When I click any of the buttons, it displays both indicators

[MichaelWest22]

Did some quick testing but I was unable to reproduce the issue sorry. Added your html to my page and also added some text content inside those two spans so i could see some content when htmx makes them show. I don't have the CSS for the for the loading classes you use here so maybe these could be part of the reproduction? Also the hx-on could be the cause as I don't have know what this triggered event does. But for me only the button selected would briefly show the content of the span tag and adding a breakpoint and stepping through the hx-indicator checking code in htmx it only set the htmx-request class on the selected button. when hx-indicator class only is on the element it is meant to hide it with CSS and when both htmxx-indicator and htmx-request are on the tag from hx-indicator it shows them.

I would also test with the hx-indicator attributes changed or removed to see if something else is overriding the htmx CSS hide causing them to show with some other feature on your page that is not related to hx-indicator feature.

[sdolemelipone]

I encountered a similar problem to @ripplethor today, and understand that this is expected behaviour. In order to keep form behaviour local to the <form> element, my workaround is to modify as below:

<form hx-post="/submit" hx-indicator=".htmx-submitter">

  <button action="submit" name="action" value="action1" hx-on:click="this.classList.add('htmx-submitter')">
    Button 1
    <span id="indicator1" class="htmx-indicator">🔄</span>
  </button>

  <button action="submit" name="action" value="action2" hx-on:click="this.classList.add('htmx-submitter')">
    Button 2
    <span id="indicator2" class="htmx-indicator">🔄</span>
  </button>
</form>

( elements are always replaced after the request so I don't worry about removing the htmx-submitter class)

Would it be theoretically possible to make the triggering event available to hx-indicator? So one could do something like:

<form hx-post="/submit" hx-indicator="js:'#' + event.submitter.id">

  <button action="submit" name="action" value="action1" id="button1">
    Button 1
    <span id="indicator1" class="htmx-indicator">🔄</span>
  </button>

  <button action="submit" name="action" value="action2" id="button2">
    Button 2
    <span id="indicator2" class="htmx-indicator">🔄</span>
  </button>
</form>