Setting value when using groups

[jamersoniiv]

I'm trying to set a value to a select box which is using a collection and groups.

e.g. let dateList = [ {group: 'Month', label: 'This Month', value: 'This Month', isActive: true}, {group: 'Month', label: 'Last Month', value: 'Last Month', isActive: true}, {group: 'Month', label: '2 Months Ago', value: '2 Months Ago', isActive: true}, {group: 'Quarter', label: 'This Quarter', value: 'This Quarter', isActive: true}, {group: 'Quarter', label: 'Last Quarter', value: 'Last Quarter', isActive: true} ]

const groupBy = (item) => item.group;

<Select bind:value={ph} items={dateItems} on:select={dateChanged} isClearable={false} showIndicator={true} isSearchable={false} isGroupHeaderSelectable={false} groupBy={groupBy} {Item} />

I have a button that simply runs this function (as a test): function test(){ ph = dateItems.find(o => o.value === "Last Quarter"); console.log("ph:", ph); }

console shows that it finds the value: { group: "Quarter", isActive: true label: "Last Quarter" value: "Last Quarter" }

However, the selectbox will not update to display the correct item.

[jamersoniiv]

My apologies, realized I was using a version 3 build of this, ignore the above please.