dynamic autocomplete options doesn't trigger reactivity

[jer-0]

Current Behavior

hey!, I am using input chip with autocomplete. on:input event I want to update the autocomplete options.

when I reassign the array it doesn't work (show new options), but when I push items to the array it works (show new options).

Looking at the the AutoComplete component source; the options prop gets reassigns to listedOptions, so updating options prop won't trigger reactivity.

Steps To Reproduce

<script lang="ts">
  import { InputChip } from '@skeletonlabs/skeleton';
  import { Autocomplete } from '@skeletonlabs/skeleton';
  import type { AutocompleteOption } from '@skeletonlabs/skeleton';

  let inputChip = ''
  let inputChipList: string[] = ['vanilla', 'chocolate'];

  let autoCompleteOptions: AutocompleteOption[] = []

  function onChipSelect(event: any): void {
    inputChipList.push(event.detail.label)
    inputChipList = inputChipList
  }

  async function onInput(e: Event) {
    autoCompleteOptions = [
        {label: 'James', value: '1'},
        {label: 'Jack', value: '2'},
        {label: 'Jamor', value: '3'},
      ]
  }
</script>

<InputChip 
  bind:input={inputChip} 
  bind:value={inputChipList} 
  name="chips" 
  on:input={onInput}
/>

<Autocomplete
  bind:input={inputChip}
  options={autoCompleteOptions}
  class="card w-full max-w-sm max-h-48 p-4 overflow-y-auto"
  on:selection={onChipSelect}
/>

Anything else?

Updating

skeleton/src/lib/components/Autocomplete/Autocomplete.svelte

Line 56 in 52a0a12

let listedOptions = options;

to $: listedOptions = options; produce expected result:

[endigo9740]

@jer-0 can you walk through the use case for updating the suggested options. This feels like it has the potential to cause UX issues. Here's an example:

• Imagine there are 3 options to the autocomplete on page load: foo, bar, fizz
• If the user search for bar, this will not be present, as it's not in the list.
• Then the autocomplete options update (which is completely invisible to the user) to include bar
• Then the user can search and find bar

But the issue here is there's no visual acknowledgment of this occurring. So it's not just a matter of can the component options be update, it's a matter of should they be updated. And I'm leaning towards no here.

The other thing to note is that the allow/deny lists are trigger only on initialization. So setting listedOptions to a reactive property is not the solution. We'll have to pass the options list through the entire filtering process each time the prop options updates. So it's not as trivial as stated above.

If you can present a strong use case for this scenario, then we'll implement this. But we don't make things reactive just because we can. We make things reactive when they need to be. Make sense?

[endigo9740]

FYI I'm moving this from bug -> feature request as well. The component is currently working as intended. This would be a requested change to that functionality.

[endigo9740]

Closing due to inactivity. If a proper use case can be demonstrated here I'll consider reopening and implementing this request. Thanks.

[jer-0]

Closing due to inactivity. If a proper use case can be demonstrated here I'll consider reopening and implementing this request. Thanks.

Hey!, A use case would be fetching data on input event and and adding the newly fetched data to autocomplete options list, so to have a dynamic autocomplete options.

This would be useful if you have a very large dataset, it wouldn't be ideal to include a large data set in the component html.

Thanks

[jer-0]

reference to some good svelte autocomplete libraries:
https://mskocik.github.io/svelecte/
http://simple-svelte-autocomplete.surge.sh/

[jcoble]

A use case I have is pretty much the same as @jer-0. Users will have to search/filter through a national db of medications to choose one. The data is pretty large and the filtering is already done through the api. So the local filtering could be turned off. Just would need the functionality to load that filtered data as the user types. Maybe a delay and debounce so not too many requests are going through at a time. Instead of providing the options, provide a promise or function that loads that data to the Autocomplete as options. Svelte-select does this pretty nicely. https://github.com/rob-balfre/svelte-select

[MLNW]

I will also be interested in this functionality. We have a large amount of text data to search through and provide as options in an autocomplete component. E.g. a large amount of tags that could be applied to an element. The full text search will be handled by something like ElasticSearch and only displayed in the UI after the fact.

[jer-0]

workaround:
Update

skeleton/src/lib/components/Autocomplete/Autocomplete.svelte

Line 56 in 52a0a12

let listedOptions = options;

to $: listedOptions = options;

ps: you have to delete vite deps if your running dev server

[SebasF1349]

This issue looks to have been resolved with Dom's pr #1543

[endigo9740]

Thanks for the heads up @SebasF1349 - @Sarenor may not have tagged the issue or something like that. I'll close it for now.