bug: ion-select popover triggers duplicate ionChange event #26789
Description
Describe the bug
I recognized a weird behavior on ion-select on "popover" interface. The ionChange event gets triggered doubles when i clear the selection.
Same code with different interface like "action-sheet" works as expected tho.
To reproduce
Steps to reproduce the behavior:
- take the example code from here https://ionicframework.com/docs/api/select#popover
- change it to the following code (https://stackblitz.com/edit/angular-xobls8?file=src%2Fcomponents%2FExample.vue)
<template>
<div @click="clear()">clear fruits</div>
<ion-list>
<ion-item>
<ion-select
@ionChange="
(event) => {
test(event.detail.value);
}
"
ref="selectEl"
interface="popover"
placeholder="Select fruit"
>
<IonSelectOption value="apples">Apples</IonSelectOption>
<IonSelectOption value="oranges">Oranges</IonSelectOption>
<IonSelectOption value="bananas">Bananas</IonSelectOption>
</ion-select>
</ion-item>
</ion-list>
<div v-for="fruit in fruits" :key="fruit">{{ fruit }}</div>
</template>
<script>
import { IonList, IonItem, IonSelect, IonSelectOption } from '@ionic/vue';
import { defineComponent, ref } from 'vue';
export default defineComponent({
components: { IonList, IonItem, IonSelect, IonSelectOption },
setup() {
const selectEl = ref();
let fruits = ref([]);
const test = (value) => {
if (value) fruits.value.push(value);
selectEl.value.$el.value = false;
};
const clear = () => {
fruits = [];
};
return {
selectEl,
fruits,
test,
clear,
};
},
});
</script>
- add items to "fruits" array by selecting a fruit on the ionSelect
- See error
- change the interface to "action-sheet" to see the expected behavior
Expected behavior
interface "popover" should behave exactly like other interface options when ionChange is triggered
Browser and OS (please complete the following information)
- OS: Windows
- Browser: Chrome