aymeric-giraudet / svelte-algolia-instantsearch

A Svelte component library for Algolia InstantSearch.js
https://svelte-algolia-instantsearch.vercel.app/
MIT License
52 stars 12 forks source link

Selecting an item in `RefinementList` visually selects a 2nd item when not using `sortBy` #27

Open djdembeck opened 1 year ago

djdembeck commented 1 year ago

Let's say I have a RefinementList component setup like so:

<RefinementList
    attribute="tags"
    searchable={true}
    searchablePlaceholder="Search tags"
    showMore={true}
    classes={{
        root: 'space-y-4',
        input: 'input',
        list: 'space-y-2 flex flex-col p-2',
        item: '',
        label: 'flex items-center space-x-2 ',
        labelText: 'truncate flex-auto',
        checkbox: 'checkbox',
        count: 'badge py-0 px-1 variant-filled-warning',
        showMore: 'btn btn-sm variant-filled'
    }}
/>

If I click a checkbox, the list will visually show that a second refinement was selected, though only the first was actually applied as a refinement. This continues with any click, with 2 items being visually checked for each 1 press.

Screencast from 10-10-2023 02 52 38 PM

With a sortBy prop in place, this doesn't occur. I assume the issue is coming from the array of items changing order while the component re-loads or something to that effect.