React Instantsearch SortBy -- dynamically changing the available options

[tremby]

I'm using React Instantsearch, and the SortBy widget (actually I'm using hooks and custom UI, but I'm hitting the same issues if I use the prebuilt widget).

Depending on some options the user changes in the UI (particularly, which result types they want to see), I want to dynamically change the available sort options, since some don't make sense in certain situations. As a concrete example, we have menu for result type, which can be product, recipe, or article. Unless the user is searching for recipes, the sort option "cook time" makes no sense, and we want to hide it.

I've tried various approaches but no matter what I try, when I change the available sort options passed to SortBy, Instantsearch seems to get into an inconsistent state and I see unexpected and buggy behaviour. It gets buggy even if I ensure I'm not surprising it by removing an option currently in use.

I don't know if I'm doing something wrong, or this is unsupported and failing is expected, or if I'm running into a bug.

Here's one iteration of the code I was using.

export const allSortOptions = [
  {
    label: "Best match",
    value: algoliaConfig.index,
    validity: ["products", "recipes", "articles"],
  },
  {
    label: "Latest to oldest",
    value: `${algoliaConfig.index}_date_desc`,
    validity: ["products", "recipes", "articles"],
  },
  {
    label: "Oldest to latest",
    value: `${algoliaConfig.index}_date_asc`,
    validity: ["products", "recipes", "articles"],
  },
  {
    label: "Alphabetical (A-Z)",
    value: `${algoliaConfig.index}_alpha_asc`,
    validity: ["products", "recipes", "articles"],
  },
  {
    label: "Alphabetical (Z-A)",
    value: `${algoliaConfig.index}_alpha_desc`,
    validity: ["products", "recipes", "articles"],
  },
  {
    label: "Price (high to low)",
    value: `${algoliaConfig.index}_price_desc`,
    validity: ["products"],
  },
  {
    label: "Price (low to high)",
    value: `${algoliaConfig.index}_price_asc`,
    validity: ["products"],
  },
  {
    label: "Time (long to short)",
    value: `${algoliaConfig.index}_time_desc`,
    validity: ["recipes"],
  },
  {
    label: "Time (short to long)",
    value: `${algoliaConfig.index}_time_asc`,
    validity: ["recipes"],
  },
];

// Helper hook to get the currently selected category
export function useCurrentCategory() {
  const { items } = useCurrentRefinements();
  return (
    (items.find(
      (item) =>
        item.indexName === algoliaConfig.index && item.attribute === "cmsType",
    )?.refinements[0]?.value as Category | undefined) ?? null
  );
}

// In my search/results component:

{
  // ...

  const category = useCurrentCategory();

  // ...

  // FIXME: Can't get this working. AIS doesn't seem to like the sort
  // options changing, even if I'm *not* surprising it by removing an option
  // currently in use.
  const sortOptions = useMemo(
    () => allSortOptions.filter(({ validity }) => validity.includes(category)),
    [category]
  );

  // ...

  return (
    // ...
    <SortBy id="sort-search" items={sortOptions} />
    // ...
  );
}

Is there anything wrong with what I'm trying to do? Ought it be possible? Is it a supported feature? Is it a bug?

Thanks.

[Haroenv]

In theory this should work, but I indeed wonder if something is keeping the items cached, or maybe a cleanup happens when the options change.

Alternatively to your current option, what you can do as well is a static list for items, and inside transformItems you change it based on the actual available options.

If that doesn't work (maybe it doesn't trigger a change/render), I think you could use useSortBy and render the list yourself based on the conditions you have.

I've never seen the use case of dynamic sortBy options. There definitely could be a bug going on as it's not a common pattern. Do you think you could create a reproduction in codesandbox, or maybe even in a test for the repo?

Thanks!