Updating sort by code does not add asc/desc class to buttons

Attributes
1

Description

I am using Attributes V2 query params and list sort/filter/load. I am using query params to persist filtering and sorting state. Functionally everything is working except the fs-list-ascclass or fs-list-descclass is not applied to the buttons when updating the sorting programmatically, like it is when actually clicking the sort buttons.

function updateUrl(params) {
  const newURL = params.toString()
    ? `${window.location.pathname}?${params.toString()}`
    : window.location.pathname;

  window.history.replaceState({}, "", newURL);
}

window.FinsweetAttributes = window.FinsweetAttributes || [];

window.FinsweetAttributes.push([
  "list",
  (listInstances) => {
    const [listInstance] = listInstances;

    listInstance.addHook("render", () => {
      window.Webflow && window.Webflow.destroy();
      window.Webflow && window.Webflow.ready();
      window.Webflow && window.Webflow.require("ix2").init();
      window.updateFancybox();
      document.dispatchEvent(new Event("readystatechange"));
    });

    listInstance.addHook("filter", (items) => {
      const params = new URLSearchParams(window.location.search);
      const filterSelects = document.querySelectorAll(".filter-select");

      filterSelects.forEach((select) => {
        const paramName = select.getAttribute("fs-list-field");

        if (["state", "tenant", "ownership"].includes(paramName)) {
          if (select.value) {
            params.set(paramName, select.value);
          } else {
            params.delete(paramName);
          }
        }
      });

      updateUrl(params);
      return items;
    });

    listInstance.addHook("sort", (items) => {
      const params = new URLSearchParams(window.location.search);
      const sortBy = listInstance.sorting.value.fieldKey;
      const sortDir = listInstance.sorting.value.direction;

      if (sortBy && sortDir) {
        params.set("sortBy", sortBy);
        params.set("sortDir", sortDir);
      }

      updateUrl(params);

      return items;
    });

    setTimeout(() => {
      const filterSelects = document.querySelectorAll(".filter-select");

      for (const select of filterSelects) {
        if (select.value) {
          select.dispatchEvent(new Event("input", { bubbles: true }));
        }
      }

      const params = new URLSearchParams(window.location.search);
      const sortBy = params.get("sortBy");
      const sortDir = params.get("sortDir");
      if (sortBy && sortDir) {
        listInstance.sorting.value.fieldKey = sortBy;
        listInstance.sorting.value.direction = sortDir;
      }
    }, 100);
  },
]);
2

I updated my code to just manually add/remove the classes (and the aria label), but there is still one more issue. It seems there is still some internal state that is not being updated because if the sort order is asc from the URL param, the first click of the button still sorts by asc instead of desc.

3

Hey @danielseravalli! You can DM me the staging link if you want me to take a look at it!