Selected value in Input type="select" lost.

[obendi]

Hi,

I have a group of Input elements with preloaded values:

<script>
  let formData = {}
  formData.age = 30;
  formData.color='red'
</script>

<Input id="name" name="name" type="text" bind:value={formData.name} />
<Input id="age" name="age" type="number" bind:value={formData.age} />
<Input id="color" name="color" type="select" bind:value={formData.color}>
	<option value="green">Green</option>
	<option value="red">Red</option>
</Input>

When I change the value of one of the inputs, the selected value of the Input Select is lost.

Here there is a REPL showing it: https://svelte.dev/repl/e1fb4972879b4b21aa7a714060d7434e?version=3.42.3

Thanks!

[bestguy]

Hi @obendi , hmm that's weird - I'm actually able to duplicate outside sveltestrap with any component that wraps a select:

https://svelte.dev/repl/f0e8ec9d58434f8a8491278f855bf8b5?version=3.42.3

Please see the "Select.svelte" in this repl:

<script>
  export let value = '';
</script>

<select
  {...$$restProps}
  bind:value
>
  <slot />
</select>

Code seems fine, but behaves incorrectly as you point out.
Is this a Svelte issue or am I misunderstanding binding in components?

[obendi]

Hi @bestguy ,

Looks like it stop working in Svelte version: 3.42.2.

With 3.42.1 works fine: https://svelte.dev/repl/f0e8ec9d58434f8a8491278f855bf8b5?version=3.42.1

If you see in Svelte changelog, in 3.42.2 version are some changes related to <select> tag.

I've found this open issue: sveltejs/svelte#6675

Thanks!

[bestguy]

Ah thanks! Will keep an eye on it.

[vfilatov]

a workaround until they fix sveltejs/svelte#6675
https://svelte.dev/repl/3b4b87493ad34fcca1f5711e84bc84a6?version=3.42.3

[obendi]

Hi,

This has been fixed in Svelte 3.42.4 version: https://svelte.dev/repl/f0e8ec9d58434f8a8491278f855bf8b5?version=3.42.4

Thanks!