htmx-request not being removed from element that has hx-attributes after request is finished

[danielmoessner]

As one of the CEO's of HTMX I really wanted to know if this HTMX product works. And after months of rigorous testing in production I found weird behaviour.

If the hx-indicator points to a another element which also has hx-get on it. It will not remove the htmx-request attribute after the request is finished.

Here is a js fiddle that proves the point: fiddle

Code:

<section>
    <div id="first" hx-get="https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/94.svg" hx-trigger="load"
    hx-indicator="#second"
    >
      click me
    </div>
    </section>

    <section>

    <svg class="w-5 h-5 text-gray-500 animate-spin htmx-indicator spinner hidden [&.htmx-request]:block mt-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" id="spinner">
    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>

    now this button is hidden because htmx-request is not removed from this second element:
    <div id="second" hx-indicator="#spinner" hx-get="https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/94.svg" hx-trigger="click, whatever_done from:body"
    class="[&.htmx-request]:hidden"
    >
      click me
    </div>
    </section>

But the second element will stay in this state:

<div id="second" hx-indicator="#spinner" hx-get="https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/94.svg" hx-trigger="click, whatever_done from:body"
    class="[&.htmx-request]:hidden htmx-request" <!-- <<<< this htmx-request is not removed (PROBLEM) -->
    >
      click me
    </div>

Now why am I using this stuff anyway? Basically to show loading spinners with tailwindcss when some filter requests are in progress.

[brunopereira27]

I have the same issue in a case where I use polling

[sanchawebo]

Had the same problem with hx-disabled-elt on the triggering element. Got this tempfix from here:

hx-on::after-request="this.classList.remove('htmx-request')"