Select input does not update

[supersational]

The following example shows the Sveltestrap input behaving differently to a regular input component.

<script lang="ts">
	import { Input } from 'sveltestrap';

	let midiPorts = [
		{ id: '1', name: '1' }
	];
	let selectedInput = '1';


	setTimeout(() => {
		midiPorts = [
			{ id: '2', name: '2' },
			{ id: '1', name: '1' }
		];
	}, 500);

</script>
<p>
	selected input should be: {selectedInput}
</p>
<Input type="select" bind:value={selectedInput}>
	{#each midiPorts as port}
		<option value={port.id}>{port.name}</option>
	{/each}
</Input>
<select bind:value={selectedInput}>
	{#each midiPorts as port}
		<option value={port.id}>{port.name}</option>
	{/each}
</select>

REPL: https://svelte.dev/repl/35220d0977954638ab45e96c718eb893?version=3.46.4

The inputs should both have the '1' option selected.

[jaeming]

A work around that will fix this is adding a key to your each block. Repl demo adjusted: https://svelte.dev/repl/ec2d95279a8b4dc4b148bc4e5a85e255?version=3.46.4

aside from that, I'm not sure what causes the difference here from the native example (maybe something to do with how slots render) but overall the effect is due to how each blocks work in svelte which is why it's generally recommended to key an array in your #each if you are going to be modifying them. See here: https://svelte.dev/tutorial/keyed-each-blocks