Show refinements even if search doesn't return any matching results


I have an issue with RefinementLists using vue-instantsearch not showing any options whenever the search has no results.

To reproduce :

  • Go to Storybook
  • Select “Samsung” in the refinement list
  • Type a random word that doesn’t match any result in the search, for example “BBBBBB”
  • No results will be found and the refinement list will disappear.

In this case, the user can’t disable any refinements they would have chosen before searching.

Is there a way to still show the complete refinement list to let the user see the one enabled and uncheck them if necessary?

Thanks for your help!

This is how the refinement lists work by default. The pattern here is to show all active refinements using ais-current-refinements | Vue InstantSearch | Algolia

Then the user can remove filters of they’ve ended up in a no-results situation.

Here’s a Storybook showing this widget in action:

Hello Chuck, thank you for the answer!

I already used this widget in my search, it’s a good solution to show currently enabled filters when there’s no result, but if there are results, it duplicates the information since enabled filters are both shown in the refinement list & on the widget.

Anyway, I guess there’s no easy solution to my issue if not for a custom workaround.

I hope someday there will be an option in ais-refinement-list that would let us choose if filters should stay visible with no results.

Thanks again!

1 Like