I’m using Ionic with React with the version 5.9.4. On a page there are two IonSelect and on the first one there are issues setting the initial value. Changing the order shows that still the first cannot get the initial value. I debugged and actually at some point onIonChange emits somehow undefined. Which is there the reason the initial is missing.
<IonSelect
data-cy={'edit-item-type'}
interface="action-sheet"
value={item?.type}
onIonChange={event => setItemField(event)}
>
{
Store.getGym().items
.map(type => <IonSelectOption key={type.key}
value={type.key}>{type.de}</IonSelectOption>)
}
</IonSelect>
<IonSelect
data-cy={'edit-item-account'}
interface="action-sheet"
value={item?.account}
onIonChange={event => setItemField(event, 'account')}
>
{
Store.getGym().accounts
.map(account => <IonSelectOption key={account.name}
value={account.name}>{account.name}</IonSelectOption>)
}
</IonSelect>
function setItemField(event: CustomEvent, field: keyof Item) {
setItem({
...item,
[field]: event.detail.value as string
} as Item);
}
Do you know why the onIonChange of the first IonSelect emits undefined at some point?