Manually Uncheck RefinementList Facet Value

Using vue-instantsearch components.

I’ve added multiple refinementLists under collapsable headings to group them and not have too many filters appear at once.

Whether a refinement list is shown is controlled by a v-if statement.

What I want to happen is when a heading is closed and the refinement list hidden (destroyed) the results react as if all the facet values were unchecked.

Looking at the refinementList source code when it’s destroyed it removes the facet from the store.

destroyed() {
    this.searchStore.stop();
    this.searchStore.removeFacet(this.attributeName);
    this.searchStore.start();
},

However this does not appear to uncheck any of the options/facetValues that have been checked. The refinement list no longer exists on the page yet the results are still filtered by it.

I need this to happen so is there a way to do it through the store?

Do people also not think this should be default behaviour?

Hey Vinny,

This seems like the correct code. If you look what happens when you toggle the v-if condition of a refinement-list, it does actually take away the refinement. Maybe something else you are doing is putting it back? It would be useful if you showed a minimal reproduction which shows your error.

See https://codesandbox.io/s/q8q3r17kj9 for an example I just made to toggle to show a refinement list

Hey Hareon, thanks for getting back to me.

Your very own example demonstrates the problem I’m talking about.

If you select multiple refinement list checkboxes then click “Toggle refinement list showment” the refinement list is hidden/destroyed and yet the search is still filtered by the selected options.

It isn’t until you click it again to show the refinement list that the search resets.

1 Like

Oh yes you’re right, I must have been blind to not notice that before!

1 Like

No worries. Expected behaviour for me is that the search would be cleared.

Do you know of a way I can force the refinement to reset?

Of note is that in my current use case I have multiple refinement lists all under their own respective collapsable header. I would only want the filters for the hidden/destroyed refinement list to clear and for the others to remain active.

Yes, this is in fact an error in most of our components that I’m currently looking at how the correct way to do this change, but this.searchStore.clearRefinements(this.attributeName) should work. I’ll confirm with you in a bit

1 Like

The clearRefinements works, thanks for the tip.

I have a watcher on an object that tracks what headers are expanded. So whenever the watcher fires I’m checking what headers were collapsed. I’ve added a line to clear the refinements for the collapsed header and now it’s working as intended.

Yep, I’ve found that it works as expected as well, but only when the store isn’t stopped / started before. While this clearly is is a bug in Vue InstantSearch, I don’t think I’ll fix it for now, because it would be a breaking changes for people who depend on it.

We are however planning to release a v2 of Vue InstantSearch quite soon; and this issue does not happen in that version, since it’s internally completely different.

If this is an issue for you, please open an issue on Vue InstantSearch and we can see if it’s solvable. The components that show this unexpected behaviour are:

  1. Menu
  2. RangeInput
  3. RefinementList
  4. TreeMenu

Hope that makes sense :slight_smile:

It’s fine if I know the workaround :wink:

Cheers for your help though much appreciated.

1 Like