bug: Vue IonAccordionGroup takes value from underlying component

[Christilut]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] 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 https://github.com/ionic-team/ionic-framework/issues/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>

1. Open accordion One. Text below the accordion will change to one.
2. Type in any text in the searchbar
3. Click outside the accordion anywhere, like below it.
4. 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

[liamdebeasi]

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.

[liamdebeasi]

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

[Christilut]

Yep, looks like that fixes it 👍

[liamdebeasi]

Thanks for testing! This was fixed in https://github.com/ionic-team/stencil-ds-output-targets/pull/425. I'll cut a new release of this package and make sure it's installed in Ionic Framework.

[ionitron-bot[bot]]

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.