For those stumbling upon this in the future, I have found the issue.

The culprit is the

:sort-by="['name:asc']"

That is within the ais-refinement-list. Remove it and it won't refresh and reset the refinements.

Hi!

I am struggling with making my AIS refinement lists collapse for better UX. However I have not yet found a way to do so without AIS re-initializing and "forgetting" the selected facets (filters). I am struggling with finding a working solution and I have not found any examples that are applicable to me.

Below I have pasted a snippet of the code. I have a toggle, showColorFamily, which determines the state of the collapse. I can't mark the list items as Hidden or render only the selected refinements with Vue if the Show is false. AIS sees this as a change and wants to re-initialize.

Does anyone have a good, working example of how this gets done? That would ultimately help me the most.

Thanks in advance,

                <h3
                    class="text-sm font-medium my-2 px-3 text-dark-blue pb-1 border-b cursor-pointer select-none flex justify-between items-center"
                    @click="showColorFamily = !showColorFamily"
                >
                    <span>Color Family</span>
                    <span class="text-xs">
                        {{ showColorFamily ? '−' : '+' }}
                    </span>
                </h3>

                <div>
                    <ais-refinement-list
                        :class-names="{
                      'ais-RefinementList-list': 'flex flex-col gap-0',
                      'ais-RefinementList-item': 'flex items-center justify-between px-2 py-0.5',
                      'ais-RefinementList-label': 'flex items-center gap-2 w-full',
                      'ais-RefinementList-checkbox': 'w-4 h-4 accent-dark-blue',
                      'ais-RefinementList-labelText': 'truncate',
                      'ais-RefinementList-count': 'text-xs text-gray-500',
                      'ais-RefinementList-item--selected': 'font-semibold',
                      'ais-RefinementList-item--disabled': 'opacity-50 cursor-not-allowed'
                    }"
                        :limit="20"
                        :sort-by="['name:asc']"
                        attribute="color_family"
                    >
                        <template #item="{ item, refine }">
                            <li
                                :class="[
                              'flex items-center gap-2 px-2 py-0.5 rounded flex-1',
                              (item.isRefined)
                            ? 'font-semibold'
                            : ''
                            ]"
                            >
                                <!-- Image -->
                                <img
                                    :src="colorFamilyImages[item.value] ?? '/storage/images/icons/colors/placeholder.png'"
                                    alt=""
                                    class="w-8 h-8 object-contain"
                                />

                                <!-- Checkbox and name -->
                                <label class="flex items-center gap-2 cursor-pointer">
                                    <input
                                        :checked="item.isRefined"
                                        :disabled="item.isDisabled"
                                        class="w-4 h-4 accent-dark-blue"
                                        type="checkbox"
                                        @change="refine(item.value)"
                                    />
                                    <span class="truncate">{{ item.label }}</span>
                                </label>

                                <!-- Color Count -->
                                <span class="text-xs text-gray-500 ml-auto">{{ item.count }}</span>
                            </li>
                        </template>


                    </ais-refinement-list>
                </div>

I've spent another 4 hours on it and I still haven't found the cause. This is starting to worry me.

Hi,

I am not sure what part I should be looking at here.

I'm doing some more digging and it appears to be related to the history state. When I navigate to the Product page and hit history.state in the console, I get a NULL response.

I proceed to press BACK on the browser. The DOM does not update, the Title in Head does change and I proceed to try history.state in the console again.

Now I do get a state - one that reflects the current Product page.

I repeat the same process. Hit back, check history. This time it's NULL once more.

Repeat again. State is populated with the product.

This repeats ad infinitum.

If I double press back on the browser, I return to my home page (from which I initiated my search)

I now have the option to press Forward on the browser as well. Doing so takes me from my Home page to the Product page, skipping the Search Results page.

It looks like there is no history / incompatible history for the search results page.

That is as far as I have gotten.

Hi,

First time I have to reach for the forums with an issue. AI assistance seems not to be able to find the issue either.

TLDR: When navigating back from a Product page back to the Search Results page, the DOM doesn't update back to the Results page.

Here's the context:

(Inertia, vue)

I have a very simple search results page scaffold to test. In there, I have a UL with LI that contain Link components. Those link components direct the user to a specific page that belongs to that result.

From here I can reach the Product page just fine. When I try to navigate back with the browser's back button, the title in Head updates correctly to the expected value for the Search Results page

(<Head :title="Search results for ${props.query}"/>)

but the rest of the page remains the same (Looks like we're still on the product page!)

I do not understand why that is the case. Is this a common issue? I've had the same issue when trying to navigate from an index page (i.e. "All products from 2025") to the product page and back again. I'm at a loss. =(