svelte-select (multi) shows 'values' instead of labels in complex items when values change at runtime

[fsoft72]

I have a Select with complex items that shows some selected items at startup. Items are defined in items correctly and values just contains the items' value field not the whole object.

When the Select is first rendered, everything is fine, but when the user selects another value and the values variable is updated with just the IDs of items, the Select shows the ids and not the labels anymore.

I have created a small REPL showing the problem here

I am also copy / pasting the whole code here:

<script>
	import Select from 'svelte-select';
		
	const complexItems = [
		{value: 'id001', label: 'Chocolate', group: 'Sweet'},
                {value: 'id002', label: 'Pizza', group: 'Savory'},
                {value: 'id003', label: 'Cake', group: 'Sweet', selectable: false},
                {value: 'id004', label: 'Chips', group: 'Savory'},
                {value: 'id005', label: 'Ice Cream', group: 'Sweet'}
	];

	let values=['id001', 'id002'];

	const changeVal = ( e ) => {
          const items= e.detail;
		
	  values = items.map ( ( el ) => el.value );
		
	}

</script>

<Select 
	items={complexItems} 
	multiple={true}
	value={values}
	
	on:change={changeVal}
/>

[stephenlrandall]

Try this instead:

<script>
	import Select from 'svelte-select';
		
	const complexItems = [
		{value: 'chocolate', label: 'Chocolate', group: 'Sweet'},
    {value: 'pizza', label: 'Pizza', group: 'Savory'},
    {value: 'cake', label: 'Cake', group: 'Sweet', selectable: false},
    {value: 'chips', label: 'Chips', group: 'Savory'},
    {value: 'ice-cream', label: 'Ice Cream', group: 'Sweet'}
	];

	let initial = ['chocolate', 'pizza'];
	let selected = initial;

	const changeVal = ( e ) => {
		const items= e.detail;
		
	  selected = items.map ( ( el ) => el.value );
	}

	$: console.log(selected);
</script>


<h2>Multi</h2>
<Select 
	items={complexItems} 
	multiple={true}
	value={initial}
	on:change={changeVal}
/>