Add reset function to useAlgoliaSearch()

[MickL]

Is your feature request related to a problem? Please describe.

When having the search in something like a popup / modal I would like the search to reset when closing it. Unfortunately even tho my search component gets unmounted, the next time it gets mounted it already shows the previous result.

Another use case is that I want to reset the search when the input is empty.

Describe the solution you'd like

Add a useAlgoliaSearch should return a 'reset()` function that can be called e.g. onUnmounted().

Example:

const searchInput = ref('');
const { result, search, reset } = useAlgoliaSearch('products');

watchDebounced(
  searchInput,
  async () => {
    if (searchInput.length < 4) {
         reset();
         return;
    }

    await search({
      query: searchInput.value,
    });
  },
  { debounce: 200, maxWait: 500 },
);

onUnmounted(() => {
  reset();
});

[Baroshem]

Hey there,

Thanks for reporthing this feature request. I do like this idea but I wonder if maybe you could do something like this already:

const searchInput = ref('');
const { result, search, reset } = useAlgoliaSearch('products');

watchDebounced(
  searchInput,
  async () => {
    if (searchInput.length < 4) {
         result.value.hits = [];
         return;
    }

    await search({
      query: searchInput.value,
    });
  },
  { debounce: 200, maxWait: 500 },
);

onUnmounted(() => {
  result.value.hits = [];
});

You can even wrap it around with a function reset that could work just like you showed in the example. I think that if I would implement this reset function as a part of the composable, it would essentialy do the same thing and considering that I all do here is just setting hits to empty array.

Let me know what you think about it :)

[MickL]

Let me check! :)

I would kinda expect the composable resets when the component is unmounted tho. Or maybe a new option that toggles reset onUnmounted so it is not the default but can be activated?

There is also a problem that it flickers when I remove the search result when the input is empty and when it then comes again it shows the previous result for a split second. So a reset is very much required imo. I will check if I can set the hits to an empty array BUT I already have a message "No results found" when the array is empty. So it would be better if the whole result is empty again like before the first search.

[MickL]

So I tried and result.value.hits = []; would be an option BUT I think it would be better to reset the whole result on unmounted. On reason is that I use result.value.hits.length === 0 to display a non results message but also result contains more stuff (like highlighted items) that also need to be resetted.

I made a PR that should do the trick, optionally this could be done by an configurable option.