How to make 2 way binding value[]<->options[] ?

[michaltaberski]

I would like to keep 2 way binding with making mapping on the way. This is not pure svelte-multiselect issue, but it's easy to visualise it in the svelte-multiselect usecase:

I would like to use values as an array of strings (ids) and dynamically map those ids to provided options (if present). It's not a problem doing this 1-way, but how to maintain the 2-way binding?

// Superior component 
<script lang="ts">
  import MultiSelect from "svelte-multiselect";
  import { ExcludeFalsy } from "../typeScriptUtils";

  type Option = { label: string; value: string };

  export let values: string[];
  export let options: Option[] = [];

  $: {
   selected = values
    .map((val) => options.find(({ value }) => val === value))
    .filter(ExcludeFalsy);
   // OFC THIS IS NOT POSSBILE (CIRCULAR UPDATE), BUT HOW TO DO THING LIKE THAT?
   // values = selected.map(({ value }) => value);
  }
</script>

<MultiSelect {options} bind:selected />

[janosh]

I only have bad news on this point. I'm not aware of a solution and I'm not even sure there is a way to break the recursion in the general case.

[michaltaberski]

I have a little update that might be useful for others. Stackoverflow has helped me a bit. It does the job, although it is a little bit complicated. Nevertheless for now it's good enough.

Thanks @janosh for feedback.

[janosh]

Wow, that's a very cool REPL! I had no idea this was possible. Thanks for sharing. I'll definitely use this to make value and selected each reactive to the other. 👍