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>