bug: Vue IonAccordionGroup takes value from underlying component
Christilut opened this issue · 5 comments
Prerequisites
- I have read the Contributing Guidelines.
- I agree to follow the Code of Conduct.
- I have searched for existing issues that already report this problem, without success.
Ionic Framework Version
v7.x
Current Behavior
It appears that the ion-accordion-group v-model takes the value from an underlying component (ion-searchbar in this case) when the underlying component changes model value.
Seems this is the same issue as ionic-team/ionic-framework#28288
Expected Behavior
Model value of ion-accordion-group should not be affected by a changing model value of an underlying component
Steps to Reproduce
<template>
<ion-accordion-group v-model="accordion">
<ion-accordion value="one">
<ion-item slot="header">
<ion-label>One</ion-label>
</ion-item>
<div slot="content">
<ion-searchbar v-model="search"></ion-searchbar>
</div>
</ion-accordion>
<ion-accordion value="two">
<ion-item slot="header">
<ion-label>Two</ion-label>
</ion-item>
<div slot="content">
<h1>test</h1>
</div>
</ion-accordion>
</ion-accordion-group>
<br>
<span>
Accordion value: {{ accordion }}
</span>
</template>
<script lang="ts">
import { markRaw } from 'vue';
import { IonAccordionGroup, IonAccordion, IonSearchbar } from '@ionic/vue';
export default {
components: { IonAccordionGroup, IonAccordion, IonSearchbar },
data() {
return {
accordion: null,
search: ''
};
},
};
</script>
- Open accordion
One
. Text below the accordion will change toone
. - Type in any text in the searchbar
- Click outside the accordion anywhere, like below it.
- Accordion closes, because the
accordion
value changed to the text that was typed into the searchbar.
Code Reproduction URL
https://stackblitz.com/edit/hhmqhk-nfvvdf?file=src%2Fcomponents%2FExample.vue
Ionic Info
Ionic:
Ionic CLI : 6.20.5 (C:\Users\Chris\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/vue 7.8.1
Capacitor:
Capacitor CLI : 5.5.0
@capacitor/android : 5.5.0
@capacitor/core : 5.5.0
@capacitor/ios : 5.5.0
Utility:
cordova-res : not installed globally
native-run : 1.7.3
System:
NodeJS : v20.11.1 (C:\Program Files\nodejs\node.exe)
npm : 10.2.4
OS : Windows 10
Additional Information
No response
Thanks! This appears to be a bug in our Vue wrappers, so the issue will need to be fixed there. The problem is that we listen for the event name but accept any instance of that event. In the case of the AccordionGroup, we should only update its v-model when ionChange
is dispatched from ion-accordion-group
. Other events of the same name that bubble should not impact it.
Here's a dev build with this repo's fix in Ionic Framework if you are interested in testing:
npm install @ionic/vue@7.8.2-dev.11711372742.1611f05e @ionic/vue-router@7.8.2-dev.11711372742.1611f05e
Yep, looks like that fixes it 👍
Thanks for testing! This was fixed in #425. I'll cut a new release of this package and make sure it's installed in Ionic Framework.
Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of the output targets, please create a new issue and ensure the template is fully filled out.