Refinement list getting cleared when data-binding property updates

I’m using the vue algolia package and I’m encountering something that’s interfering with the refinements list when a databound property for a separate component is updated.

When I update the data value, which I do manually in the chrome vue dev tools, the current refinement selection is cleared. I’m not sure what’s causing this, it feels like something is interfering and causing a re-trigger of the search.

My intention is to track the user’s filter selection, maybe there’s a better way to do that

edit: cloudflare is blocking me from writing code, so an example snippet can be found here.

Hi @harry.dowe, would you be able to reproduce your issue on a CodeSandbox so we can understand more easily what is happening? You can fork and edit our default Vue.js template: vue-instantsearch-v2-starter - CodeSandbox.
Thanks!

I’ve been able to re-create it in the sandbox. The crux seems to be when using <ais-refinement-list :sort-by="['name:asc']" />, removing the sort by attribute fixes the problem.

To reproduce, select one or more facets, the click “Click me!”! . When the button is clicked, the facet selection is removed.

ais-refinement-list

1 Like

thanks for the sandbox suggestion, it really helped to find the crux of the issue. I’ve been able to resolve this by providing a custom sort function instead of passing an array of strings.

Seems really weird to me that the sort by can cause this though!

Thank you for taking the time to do it and investigate further!
Those are interesting findings and look like a bug with the sort-by property indeed. I’ll forward to the InstantSearch team.

Unfortunately this is a known issue in Vue InstantSearch where an array, object or function passed directly as a prop is not referentially equal to the previous value, and thus triggers an infinite number of changes.

I’m having a look again if really nothing can be done about this.

We have a bit more information around this in this FAQ entry: Vue InstantSearch FAQ | Vue InstantSearch | Building Search UI | Guide | Algolia Documentation