pstanoev / simple-svelte-autocomplete

Simple Autocomplete / typeahead component for Svelte
http://simple-svelte-autocomplete.surge.sh/
MIT License
464 stars 78 forks source link

Keyed each has duplicated key in realtime data context #204

Open PlusA2M opened 1 year ago

PlusA2M commented 1 year ago

I've experiencing issue Error: Cannot have duplicate keys in a keyed each in the situation that the data for the search function will be update after user's interaction.

Search function

function searchFromData(keyword: string) {
    return data.filter((m) => m.phone?.includes(keyword)) // return { id: string, phone: string}
}

Key attribute settings

labelFieldName="phone"
keywordsFieldName="phone"
valueFieldName="id"
sortByMatchedKeywords="true"

Hotfix on SimpleAutoComplete.svelte

Not knowing the whole lifecycle of the simple-svelte-autocomplete, I've added the timestamp to avoid that as a temporary hot fix.

{@const now = Date.now()}
      {#each selectedItem as tagItem, i (`${valueFunction(tagItem, true)}-${now}`)}