Static Refinement List "Checked" CSS Selector

Open Q&A
, , ,
#1

Hello,

I am using a custom refinement list to provide static facets and when there is no results, all of the facets become unchecked. I imagine that’s because in the standard refinementList widget, all the facets disappear. My issue is that I have certain styling associated with the css selector “checked” which disappears and provides a confusing UX.

Am I out of luck or is there a simple fix I’m missing?

Thank you :slight_smile:

In the gif below, the “Available to buy” facet has no results and when clicked on, it removes all the “checked” facets

501624

#2

Hi! I don’t think this is a CSS issue.
The facets are not returned by the search API when the result set is empty.
This doc will help you to display facets even when there are no matches.

For what it’s worth, here’s also a link to a previous thread exposing something I think is very similar to your case: Keep all filters, even if no results

Please, let us know how this goes!

#3

Thanks Jerome! I didn’t realize the refinements were not returned when there were no hits so you gave me a big clue to work with. As I am already using a customRefinementList with static refinements, the code suggested was difficult to merge and I couldn’t get it working on first attempt.

Of note, I am able to keep my refinements when I tinker with my checked (checked={items}) field on my input, but then the clearRefinements was not working appropriately then.

1 Like