Filters Leak between different instance-keys

[maximilian-schwarz]

First of all, thanks for this awesome module! 🎉 It has been incredibly helpful in implementing search functionality in our Nuxt project. However, I’ve encountered a small issue related to instance separation when using filters.

When using multiple instanceKeys in nuxt-swiftsearch, search instances correctly work independently at first. However, if another search instance includes a filter, that filter sometimes applies to other search instances as well.

This happens intermittently when refreshing the page multiple times. This issue becomes particularly problematic when using RefinementLists in one instance but not in another or any other components. And the init result is wrong.

Steps to Reproduce

1. Use multiple <Search> components with different instanceKeys:

<Search instanceKey="test123" />
<Search instanceKey="test" />

2. Add an AisInstantSearch component with a different instanceKey and a predefined filter in the client configuration:

<AisInstantSearch :widgets :configuration instance-key="test-with-filter">
  <AisAutocomplete>
    <template #default="{ currentRefinement, indices, refine }">
      <input
        type="search"
        :value="currentRefinement"
        placeholder="Search for a product"
        @input="refine(($event.currentTarget as HTMLInputElement).value)"
      />
      <AisIndex index="instant_search">
        <AisHits />
      </AisIndex>
    </template>
  </AisAutocomplete>
</AisInstantSearch>

3. Observe that after multiple refreshes, the predefined filter (objectID:5477500) sometimes applies to test123, even though it shouldn't.

Expected Behavior

Each search instance should remain isolated, and filters applied in one instanceKey should not affect others.

Actual Behavior

Intermittently, the filter from test-with-filter is also applied to test123, causing unexpected search behavior.

StackBlitz Reproduction

I have created a StackBlitz instance where this issue can be observed.
Simply refresh the preview multiple times, and at some point, the filter (objectID:5477500) will be applied to test123 as well.

https://stackblitz.com/edit/nuxt-starter-ybw3szke?file=app.vue

[Rigo-m]

I am reproducing the error correctly on stackblitz, but I can't reproducing if spawning the instance locally by pulling the repo. Are you able to reproduce it locally?

[maximilian-schwarz]

Hi @Rigo-m thanks for the fast reply. This error behaves very strangely. Sometimes it is and sometimes it is not.

I just downloaded the Stackblitz version locally and did the following:

1. npm install
2. Remove "HOST=0.0.0.0" from package.json script "dev".
3. Run npm run dev

Open "http://localhost:3000" and do some reloads and the error appears.

I have attached a video of the local version where the error occurs. I always reload the page with Shift + CMD + R. I do the whole thing with Google Chrome.

Bildschirmaufnahme.2025-03-19.um.10.22.30.mov

It's look like the first init request and the SSR Response is correct. But it feels if onMounted the filter apply to the instance and the hits changed.

Background:
In my current project in "Autocomplete" i only use "Hits" and on the same site in the listing (Seperate instace) i use "RefinmentList", "HierarchicalMenu". And here i got sometimes the following issue:

Cannot read properties of undefined (reading 'hierarchicalMenu')

And i think the problem is that anything with the instances are not correct. So I checked everything and saw that Autocomplete takes over the filter. I also think that the autocomplete possibly takes over the widgets, which are not present at all, but only in the instance of the listing.