clearable behaviour for multiple select

[joelmukuthu]

I have a use-case where a multiple-select with a predefined value should not be clearable. Setting the clearable={false} prop only removes the "clear all selected options" button, but it still allows a user to clear the predefined value either by clicking x on the selected option or via the backspace key. Is this expected behaviour or is there another way to prevent removing predefined options?

Repl: https://svelte.dev/playground/24a6b5c6e07a4bb49ca52cef12d6cc44?version=5.14.1

[mskocik]

This is not possible with multiselect (read not-implemented). I personally struggle with this use case. If something shouldn't be removable, why don't you just display it somewhere else?

Anyway... this is the way you can do it with snippet, why still maintain correct form submit.

[joelmukuthu]

Thanks for the suggestion and workaround! Displaying the pre-selection somewhere else is a good alternative but then one still has to explain to the user that that's one of the options and that it's a default selection. Displaying it right in the select, without it being removable, seems like the more intuitive solution.

What do you think of adding support for a $clearable field in an option, that can be used to disable clearing the option for multi selects?

[mskocik]

Better would be $undeletable or $unremovable to make it more clear. From my point of view it's unclear how should behave, when user select it. Should it be possible to remove it or not? As I said, I don't understand need for it. But feel free to provide PR with this.

explain to the user that that's one of the options and that it's a default selection.

But it's difference between "default" selection and "always selected", effectively making it "read-only" and therefore there is (I think) a better way to communicate this information.

[joelmukuthu]

The option would be selected already so it wouldn't be included in the list of options in the dropdown because it's a multiple-select. So adding support for this new field would mean:

1. The selected option doesn't have an x button so it can't be removed
2. Pressing backspace "skips" over that option when removing selected options

But it's difference between "default" selection and "always selected"

You're right, I used the wrong word there. It's not a default selection but rather a read-only selection as you say. And yes, it can be communicated elsewhere. The actual select I'm working with lists tags that can be added to some other entities. The select lists the same tags all over the application so users are used to seeing the same list of tags. This is why for my use-case, it makes more sense to keep the tag inside the select and alert the user to the fact that this tag cannot (and should not) be removed for this particular entity.

Thanks for being open to the idea. I'll try to work on a PR for it 🙌

[mskocik]

But I would still stick to snippet solution. IMHO much simpler than handling these sticky items.

[joelmukuthu]

Understood. Thanks for the help!