Use of getSelection and setSelection in v4.0

[Mike Sozanski]

In v3, I was using getSelection and setSelection to save <Svelecte {multiple} items into localstorage using getSelection and then loading them when needed to populate the Svelecte using setSelection. It worked quite well.
It appears that getSelection and setSelection are no longer used in Svelecte v4? Is there another method to use instead?

[Martin Skočík]

Those methods are still present also in v4. I just removed them from documentation. They were added because they were needed for custom component.

Why don't you use standard bind:value? Or is there any limitation to it?

[Mike Sozanski]

Thanks for clarifying. Trying to use bind:value failed for me (most likely because I am new to svelte and am missing something). It is a complicated use scenario in a Drug dose calculator App.
My Svelecte is this:

  <Svelecte bind:this={svelecte} inputId="drugs" 
 fetchMode="init" name="drugSelection" multiple {options} bind:readSelection={selectedItems}
    valueField="name"
labelField="name"
placeholder="Select Drugs to Add" 
clearable labelAsValue ={true}
  closeAfterSelect = {true}
 collapseSelection="blur"
 valueAsObject={true}
 fetch="/combined-min.json"
  on:change={handlekg} >  
<svelte:fragment slot="icon"> <i class="fad fa-magnifying-glass fa-fw fa-2x"></i></svelte:fragment>
 <svelte:fragment slot="clear-icon" let:selectedOptions let:inputValue>{selectedOptions.length ? '❌' : inputValue ? '' : '' }           </svelte:fragment>
  <svelte:fragment slot="dropdown-toggle" let:hasDropdownOpened>
{#if hasDropdownOpened}
  <i class="far fa-chevron-up fa-fw fa-2x"></i>
{:else}
  <i class="far fa-chevron-down fa-fw fa-2x"></i>
{/if}
 </svelte:fragment>
 </Svelecte>

[Martin Skočík]

You are using valueAsObject therefore if you also use bind:value={selectedItems} or whatever, it should be enough for you. You don't need to use readSelection because in value you will have objects anyway.

Also labelAsValue property is useless in v4.
And previously named slot indicator-icon is now dropdown-toggle (which you have correct), but exposed property has been renamed from hasDropdownOpened to isOpen.

If binding to value instead of readSelection won't help, you have problem elsewhere I would say. But without working example I can't tell if it's bug or not.

[Mike Sozanski]

Thanks. I will try setting up a REPL.
When I use bind:value={selectedItems}, I get [Svelecte]: provided "value" property is invalid

[Martin Skočík]

You need to set strictMode to false, because your initial value object/objects are not in your options property, which is empty for fetch mode.

Try it and let me know.

[Mike Sozanski]

strictMode to false worked! Thanks for pointing that out!!

[Martin Skočík]

Great to hear, I also added paragraph about this do documentation. I am closing this as resolved.