I am using Svelecte in an App. When I select multiple items and the associated template is rendered, the <select> options in the template become blank after each item is selected in Svelecte. Initially, I will see the first item's option showing but when adding addional items, the previous rendered <select> become blank (the option).
Here is a REPL showing the issue.
My Svelecte is set up like this:
<Svelecte
bind:this={svelecte}
inputId="drugs"
name="drugSelection"
multiple
bind:value={selectedItems}
valueField="name"
labelField="name"
placeholder="Select Drugs to Add"
clearable
closeAfterSelect = {false}
collapseSelection ={false}
valueAsObject={true}
{options}
on:change={handlekg}>
</Svelecte>
and my (simplified) select in the template
{#each selectedItems as item, index}
<div id="common{item.value}" class="flex flex-wrap py-1 md:py-1 eachdrug eachdrugAB commonDrug dark:border-gray-600 mb-1 md:mx-1 print:mb-0 print:py-0 print:shadow-none" data-id="{item.value}">
<span class="font-bold text-base print:text-sm searchme"> {item.name} </span>
{#if !item.concSelect || item.concSelect.length === 1}
<div class="inline-flex ml-4 relative px-2 font-bold float-right pl-2 md:pl-0 md:pr-6"> {item.concentration} {item.perml}</div>
{:else if !item.concSelect || item.concSelect.length > 1}
<div class="ml-4 inline-flex relative px-2 font-bold md:float-right">
<select bind:value={item.concs} class="conc dark:text-white dark:bg-black form-select blocked transition duration-150 ease-in-out sm:text-sm sm:leading-5 font-bold print:px-1 print:pr-2 print:border-none print:shadow-none print:bg-white print:text-black" name="select-item.calc{item.value}">
{#each item.concSelect as conc}
{#if conc.selected}
<option data-perml={conc.perml} value={conc.value} selected>{conc.name} {conc.perml}</option>
{:else}
<option data-perml={conc.perml} value={conc.value}>{conc.name}{conc.perml}</option>
{/if}
{/each}
</select>
</div>
{/if}
</div>
{/each}
Any help would be appreciated!