algolia instantsearch refinementList item toogle when search for something else

Question

I have a problem, when you make a search a select an item from the refinementList and without removing the selected item search for something else the selected item disappears from list due to the limit it have, how can i set it to always show the selected item of the refinementList?

With the refinementList item selected

Search for something else but the item is gone

Answer 1

This is currently not doable without creating a custom widget.

The currentRefinedValues widget partly solves this issue though, since it lists all checked refinements.

I've opened an issue on instantsearch.js's repo about this, I think this should be better suited than StackOverflow for this request.

Answer 2

Actually, internally the already refined facets are present in the list but they are not relevant enough to be on display in the list. This can be solved by tweaking the sortBy argument of the refinementList. In the example you are using, you can fix it like that:

search.addWidget(
  instantsearch.widgets.refinementList({
    container: '#materials',
    attributeName: 'materials',
    operator: 'or',
    limit: 10,
    sortBy: ['isRefined', 'count:desc', 'name:asc'],
    templates: {
      item: facetTemplateCheckbox,
      header: '<div class="facet-title">Materials</div class="facet-title">'
    }
  })
);

Note the use of 'isRefined' as the first predicate of the sortBy. This makes sure that already refined values will always be visible to the users.

Here is a gif of the new behaviour: