I cannot empty previous selection when changing options between related Shoelace Selects in Svelte. I tried to force Shoelace select value but it didn't work, maybe I shouldn't use two-way binding or there is another workaround when working with Shoelace and Svelte.
I have an array of trees, where trees have branches.
<script> import { trees } from './data' import Select from './Select.svelte' let id_trees = '1' let id_branches = '1' $: branches = trees.find(tree => tree.id == id_trees).branches</script><Select label="Trees" bind:value={id_trees}> {#each trees as { id, name }}<sl-option value={id}>{name}</sl-option> {/each}</Select><Select label="Branches" bind:value={id_branches}> {#each branches as { id, name }}<sl-option value={id}>{name}</sl-option> {/each}</Select>If I change from tree A to B and C everything works as expected:
but if I go back to tree A then branch C1 remains:
Here a minimal working example:
https://svelte.dev/repl/367d0371c1c34b09912f3a2a381c8234?version=4.2.10