Prevent Refinement List element going to the top of the list when clicked

This question has been asked but I haven’t found an answer or a way to do it.

I’d like the facets available for refinement to be highlighted when clicked but stay in their places and not jump around!

Is this possible?

In my case, I have just two facets for refinement so a ‘Clear refinements’ button seems unnecessary. If the user clicks the facet with fewer results, the list elements switch places but if they choose the one with more results, they don’t move…

Having selected one of the two, they might choose to go back to see all results. To me, the natural thing to do then is to click on the other facet to add its results, rather than to toggle the already clicked one. I have hidden the checkboxes and show the facets as round-ended “chips”.

If, in the first place, the user had chosen the facet with fewer results and now they click on the other one, the facets switch places again. Now both are highlighted. As the developer of the site and having been in this situation hundreds of times, I still don’t know what to do, or what’s going to happen next!

It would be a lot simpler if this ‘go-to-top’ behaviour could be disabled.

I absolutely agree that there should be more options to control the behavior of an Algolia RefinementList. My team at work extensively uses them, and it’s frustrating how many behaviors are seemingly uncontrollable.

That aside, if you want to disable the ‘go-to-top’ behavior, I would recommend using the ‘transformItems’ attribute on the RefinementList. This attribute will provide an ‘items’ variable that you can transform to manually sort your filter chips. You can read more about that here:

My team prefers to use the “connectRefinementList” which gives you complete control over the UI that Algolia displays. This way you can modify labels, sort items, and lays the groundwork to do some really interesting RefinementLists. (if you would like to read more, search the above link for “connect” and you’ll find it).

Hopefully one of these options suites your needs!