AisSortBy issue when hiding/showing other components within the AisInstantSearch widget (vue-instantsearch)

Hey folks,

I’m working on a project and have run into an issue.

I’m using Nuxt (v2.15.3) and Vue-InstantSearch (v3.7.0) to build out my search UI. Everything works great so far - both client and server side - except for some unexpected behaviour when trying to implement the AisSortBy widget.

Sorting works as expected initially (results are sorted), and I can continue to interact with the search UI (applying refinements etc). However, if I trigger any dynamic content, anywhere within my template (inside or outside of ais-instant-search), the index resets to default and a search is then performed— which is both unexpected and quite jarring.

A simple example: clicking the hide/show buttons at the top of this template resets the index (changes from whatever it is currently set to, back to index_products_default) and immediately performs a search.

<template>
  <div>
    <button @click="show = false">Hide</button>
    <button @click="show = true">Show</button>
    <span style="margin-bottom: 10px;" v-if="show">Message goes here!</span>
    <ais-instant-search :search-client="searchClient" index-name="index_products_default">
      <ais-sort-by :items="[
          { value: 'index_products_default', label: 'Relevance', description: 'Order by most relevant' },
          { value: 'index_products_price_asc', label: 'Price asc.', description: 'Order by price ascending' },
          { value: 'index_products_price_desc', label: 'Price desc.', description: 'Order by price descending' },
          { value: 'index_products_name', label: 'Name', description: 'Order by name'  },
        ]"/>
      <ais-search-box />
      <ais-stats />
      <ais-refinement-list attribute="brand" />
      <ais-hits>
        <template slot="item" slot-scope="{ item }">
          <p>
            <ais-highlight attribute="name" :hit="item" />
          </p>
          <p>
            <ais-highlight attribute="brand" :hit="item" />
          </p>
        </template>
      </ais-hits>
      <ais-pagination />
    </ais-instant-search>
  </div>
</template>

Any ideas what causes this behaviour, and how I might workaround it?

Thanks in advance!

Took some time, but I eventually figured out the issue- posting the resolution here in the unlikely case someone else stumbles upon it.

The layout this template sat within had the :nuxt-child-key="$route.fullPath". Removing this key resolved the issue, and instant search works as expected.

Thank you for sharing your solution.

Also, we recommend you to put the items for ais-sort-by inside your data(), which can unexpected results.