loading-states.js data-loading-states scope not working properly

[Odas0R]

// <a> is boosted
<a href="/path"

// <a> request must not affect elements inside this div
// but it is, at the moment. All elements inside this div
// are affected by the outside <a> GET request
<div data-loading-states>
  <form
  hx-post="/api/v1/auth/sign-in"
  hx-trigger="submit">
  ...
  </form>
</div>

The problem is in:

function loadingStateContainer(target) {
  return htmx.closest(target, "[data-loading-states]") || document.body;
}


function getLoadingStateElts(loadingScope, type, path) {
  return Array.from(htmx.findAll(loadingScope, "[" + type + "]")).filter(
    function (elt) {
      return mayProcessLoadingStateByPath(elt, path);
    },
  );
}

The fix:

function loadingStateContainer(target) {
  return htmx.closest(target, "[data-loading-states]") || document.body;
}

function getLoadingStateElts(loadingScope, type, path) {
  return Array.from(htmx.findAll(loadingScope, "[" + type + "]")).filter(
    function (elt) {
      return (
        mayProcessLoadingStateByPath(elt, path) &&
        // ensure that the loadingScope is the same as the specified scope
        loadingStateContainer(elt) === loadingScope 
      );
    },
  );
}

[Telroshan]

Hey, feel free to submit bugfix pull requests directly!

[Odas0R]

Hey, feel free to submit bugfix pull requests directly!

Hey, I'm playing with it. Stumbled on #78 too. Will fix it, and after some tinkering, will open a PR.

This can stay open just for info purposes.

[Odas0R]

Found that loading state is still activated when cached responses are being used (in the browser). Also might have some suggestions in the future for the API