Two-way binding select does not allow for dynamic multiple attribute

[rspieker]

The two-way binding on multiple select elements don't take a dynamically set multiple-attribute into consideration.
Maybe this is as intended, in which case it appears to be missing from the documentation (or I simply overlooked it).

A simple REPL to demonstrate the behavior.

Short examples:

• Works: <select bind:value multiple>
• Doesn't: <select bind:value :multiple>
• Doesn't:<select bind:value multiple="{{ multiple }}">

As for browsers, the behavior is consistent across browsers, tested in Firefox 60, Brave 0.21, Electron 1.8.3 (Chromium 59)

[Rich-Harris]

Thanks — opened #1313. Things get complex fast if you allow multiple to be dynamic on a bound <select> element, so realistically the best way to handle this is as a compiler error. If you need to be able to toggle between the two states it's probably best done with an if block.

[rspieker]

Thanks for your response. These kind of details have the tendency to be much harder to implement than just a simple workaround. A compiler error will help users to catch on to what is happening.

[Rich-Harris]

Released 1.60.2 with this change

[blujedis]

2023...just ran across this. Thought I'd post that @Rich-Harris point to use if statement is still best path as near as I can tell.

If you use bind:value for example you'll want to set multiple without a value. Meaning even multiple={true} will complain. You will want <select bind:value multiple></select>

[matths]

Using Svelte 4.2.18 I did it like this:

inside my script block:

  export let multiple: boolean;
  export let ref: HTMLSelectElement;

  $: {
    if (multiple) {
      ref && ref.setAttribute('multiple', '');
    } else {
      ref && ref.removeAttribute('multiple');
    }
  }

inside the markup section

<select bind:this="{ref}" bind:value="{value}">
   ...
</select>

...which is exactly what I would have Svelte expected to do. And I don't get why it doesn't and comes up with a compiler error instead, but this is my workaround. Maybe it is of some use for someone else.