selected.length Property Cause Issue about svelte-multiselect HOT 5 CLOSED

A temporary get-around would be to simply declare a variable of type Option[], and implement event functions (add, remove, removeAll...).
Instead of using bind, we can add/remove/clear the previously mentioned array by passing the functions to on:add, on:remove events. The array we declared would then have the .length property

However, I believe compare to svelte-select, the benefit of this package is its bind, so it would still be great if a solution could be found

from svelte-multiselect.

@Lemonsity Thanks for the bug report. Will diagnose this now. There is a much simpler workaround for the time being though: use optional chaining. selected?.length should cause you no trouble.

from svelte-multiselect.

The problem also disappears if you declare let selected = []; instead of let selected;. The 2nd is equivalent to let selected = undefined;.

This component can't do anything about selected not having a length property in that case until it mounts. So either you need to delay rendering <p>{selected.length}</p> until MultiSelect mounts or ensure yourself that selected always has a length attribute.

from svelte-multiselect.

PS: Using the code also reveals another issue, that the "charlie" option becomes undefined in the drop-down menu. I am not sure if I should open a different issue for that. Sorry I could not identify the cause of the issue and fix it.

That's because you have a typo:

  const data = [
    {label: "alpha", value: "a"}, 
    {label: "bravo", value: "b"}, 
-   {lable: "charlie", value: "c"},
+   {label: "charlie", value: "c"},
  ];

from svelte-multiselect.

Hi Janosh,

Thanks a lot for the help. Can confirm both optional chaining and initializing the value are valid solutions as of now. I would however recommend initializing with an empty array, as you can do selected[index] that way.

from svelte-multiselect.