Selected option is created as 'undefined' when using 'selected' slot

[igorlanko]

Hey,

I'm still trying to get my submit on change setup working and struggling with a bunch of things. I'd appreciate any tips.

If I use default setup with allowUserOptions={true}, the new option tag appears properly with the label that was entered for it. However if I use my own <Tag slot="selected"> component for the selected slot, it creates as undefined. It all comes back to normal when I refresh the page, eg. selected data gets reloaded.

Here's a video demo: https://share.cleanshot.com/tdtDMMzcRW7QmwhR7g4Y.

I'm confused as to why the selected binding is not invalidated?

+page.svelte that gets the data:

<script lang="ts">
$: artifact = data.artifact
$: allTags = data.allTags
$: assignedTags = artifact.collections
</script>

<CollectionSelect
  {allTags}
  {assignedTags}            
/>

CollectionSelect that hosts Multiselect

<script lang="ts">
  import Multiselect from 'svelte-multiselect'

  export let allTags = []
  export let assignedTags = []

  // mapping is needed because the lib requires 'value' and 'label' props
  let localAllTags = allTags.map((tag) => ({
    ...tag,
    value: tag.title,
    label: tag.title
  }))
  
  let localAssignedTags = assignedTags.map((tag) => ({
    ...tag,
    value: tag.title,
    label: tag.title
  }))

const handleAdd = async () => {
  await tick()
  updateTagsForm.requestSubmit()
}
</script>
<form
    method="POST"
    bind:this={updateTagsForm}
>
    <Multiselect
        options={localAllTags}
        bind:selected={localAssignedTags}
        allowUserOptions={true}
        on:add={() => handleAdd()}
    >
        <Tag
            slot="selected"
            size="md"
            let:option
            item={option}
        />
        <li
            slot="option"
            let:option
        >
            {option.title}
        </li>
    </Multiselect>
</form>

Tag that's used in the selected slot:

<script lang="ts">
  export let item
</script>
<a href={link ? link : `/collections/${item.id}`}>
  {item ? item.title : '...'}
</a>