2-way value binding on multiple select causes effect_update_depth_exceeded

[AlexJMohr]

I want to wrap svelte-select in a custom component MySelect, where the value is just value, not the list of full selected objects. It should be a full 2-way binding, i.e. modifying the value outside of MySelect should work, but I can't figure out how without causing the error effect_update_depth_exceeded

REPL: https://svelte.dev/playground/d6bf0339969e40a181352d3aaaee5f3a?version=5.19.10

// keep value in sync with selection
let selection = $state(value);
$effect(() => {
  value = selection?.map(i => i.value)
})
// keep selection in sync with value (from external changes)
// FIXME: causes effect loop
$effect(() => {
  selection = value;
})

// bind:value={selection}

I also tried using justValue, but it's the same result:

// keep value in sync with selection
let selection = $state(value);
let justValue = $state();
$effect(() => {
  value = justValue;
})
// keep selection in sync with value (from external changes)
// FIXME: causes effect loop
$effect(() => {
  selection = value;
})

// bind:value={selection} bind:justValue

I've seen a few other issues on here asking for justValue to be read/write, which I think would also solve my problem.

Any other suggestions? Thanks for the help.

[gduquesnay]

Same problem. I expected the default behavior to be for the bind:value to be justValue. It seems to me that would more useful and less surprising.