<Select> on:update sometimes sending object in event.

[recon2710]

Im using the Select component where I provide the options a in a each block; the each block iterates over an array of class/objects and I provide a enum string value to the text and value props on a SelectItem component. On:Update I send the dispatch the event. The problem is the event is sometimes sending the object i am iterating over and not a string in the event; which is causing an error. I can get around it with a type check, but the docs say the update event should string | number, so was wondering if anyone had any input?

function onDispatchEvent(event): void {
        console.log("Equals Object:",typeof event.detail) 
       dispatch('selectItem', event.detail)
    }

<Select {selected} on:update={onDispatchEvent}>
      {#each groupCompute as group (group.gt)}
                <SelectItem value="{group.gt}" text="{group.gt}"/>
      {/each}
</Select>

[metonym]

Select should now support TypeScript generics.

The update event should emit string | number, but it can receive an object when selected or a SelectItem value is set to an object. That can happen via bind:selected, the initial selected prop, or when value={group.gt} (or similar) is an object.

1. Ensure value is always a primitive

<Select {selected} on:update={onDispatchEvent}>
  {#each groupCompute as group (group.gt)}
    <SelectItem
      value={typeof group.gt === 'string' ? group.gt : String(group.gt ?? '')}
      text={group.gt}
    />
  {/each}
</Select>

2. Ensure selected stays string or number

If you use bind:selected, avoid assigning the whole group object. Keep it as the primitive value:

let selected = '';

function onDispatchEvent(event) {
  const detail = event.detail;
  if (typeof detail === 'string' || typeof detail === 'number') {
    selected = detail;
    dispatch('selectItem', detail);
  } else {
    selected = typeof detail?.gt === 'string' ? detail.gt : String(detail ?? '');
    dispatch('selectItem', selected);
  }
}

3. Type guard in the handler

function onDispatchEvent(event) {
  const detail = event.detail;
  const value = typeof detail === 'string' || typeof detail === 'number'
    ? detail
    : (detail?.gt ?? '');
  dispatch('selectItem', value);
}

4. Use a stable primitive key

If group.gt can be an object, use a dedicated id field:

{#each groupCompute as group (group.id)}
  <SelectItem value={group.id} text={group.gt} />
{/each}