What should `bind:selected` be when `maxSelect={1}`?

Length-1 array or the value? Currently gives a length-1 array.

This issue arose out of private discord communication with fnAki dated 21/06/2022. Copied here so I don’t forget about it.

I decided to throw previous packages and use svelte-multiselect for my dashboard. Love it so far (the only multi-select package that ACTUALLY allows you to change its style). Few things however,

1. the single select acts as a multi select unfortunately, so I can’t really bind it directly to my settings store and would need to do more work and listen to the change event (basically make my own component on top of MultiSelect) A: I think i know what you mean. bind:selected gives an array even if maxSelect={1}, is that it? i’ve found that annoying myself a few times. although it can also make it easier to know that bind:selected will always be an array. needs less safety checks and can avoid indexing errors. happy to take a PR to change it though if you think it not being an array is generally better

2. when you have required=true in a single select, the remove icon for the single item selected should not appear for the item selected, so that there can always be one required value A: Sometimes I find it annoying not to be able to empty a select input. But i see your point. We should maybe add a prop allowRemoveLast or sth so devs can control this behavior.

3. I’m not sure what the purpose of the loading state is? I don’t think there’s a way I can perhaps run an async function when the client tries to search? A: That’s correct, it’s purely a UI thing to display to the user something is currently happening in the background. you can do whatever you want with that, e.g.

let loading = false
function search_handler() {
  loading = true // will cause MultiSelect to show a loading spinner to the user
  // do some work like fetching options to display to the user from a server
  loading = false // reset to normal state when finished
}

<MultiSelect on:enter={search_handler} bind:loading

2 todos from this:

1. Add allowRemoveLast prop
2. Decide whether bind:selected should return a single value (not as a length-1 array) when maxSelect={1}.

[janosh]

@magicbyt3 If you want to set values from a store, it’s best to bind directly to the store. In that case, the store value needs to be an array. There’s currently no way around that if you want to keep the ability to update the component via the store.

See https://github.com/janosh/awesome-sveltekit/blob/47bad49c72/site/src/components/Filters.svelte#L26 for a real-world example.

[magicbyt3]

@magicbyt3 If you want to set values from a store, it’s best to bind directly to the store. In that case, the store value needs to be an array. There’s currently no way around that if you want to keep the ability to update the component via the store.

See https://github.com/janosh/awesome-sveltekit/blob/47bad49c72/site/src/components/Filters.svelte#L26 for a real-world example.

Thanks for that. For my purpose it was better to create an own multi select component. Not ready to publish yet but works so far. Your implementation inspired me on the way. 😃