Ionic accordion does not re render inside a modal component

Hi all,

I have a page from which I can open a modal component like so:

  async detailedModal(dataUUID: any, dataObj) {

    if (dataUUID) {
      const modal = await this.modelController.create({
        component: DetailedPage,
        componentProps: {
          itemDetail: dataObj
        }
      });

      modal.onDidDismiss().then(async (modalDataResponse) => {
        await this.refresh();
      });

      return await modal.present();
    }
  }

This opens a modal page with the following accordion inside it

<ion-header translucent>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button style="color: white" (click)="close()">Back</ion-button>
    </ion-buttons>
    <ion-buttons slot="end">
      <ion-button color="primary" (click)="editFlight()">Edit</ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>


<ion-content>


  <ion-accordion-group [multiple]="true" [value]="['crew', 'flighttimes']">

    <ion-accordion value="crew">
      <ion-item color="dark" slot="header">
        <ion-label>Pilot/ Crew</ion-label>
      </ion-item>

      <ion-list slot="content">


      </ion-list>
    </ion-accordion>


    <ion-accordion value="flighttimes">
      <ion-item color="dark" slot="header">
        <ion-label>Flight Times</ion-label>
      </ion-item>

      <ion-list slot="content">


      </ion-list>
    </ion-accordion>


    <ion-accordion value="takeoffandlanding" *ngIf="!isSim">
      <ion-item color="dark" slot="header">
        <ion-label>Take Offs, Landings, Approaches</ion-label>
      </ion-item>

      <ion-list slot="content">


      </ion-list>
    </ion-accordion>


    <ion-accordion value="expenses">
      <ion-item color="dark" slot="header">
        <ion-label>Expenses</ion-label>
      </ion-item>

      <ion-list slot="content">




      </ion-list>
    </ion-accordion>


    <ion-accordion value="tachandhobb" *ngIf="!isSim">
      <ion-item color="dark" slot="header">
        <ion-label>Tachs and Hobbs</ion-label>
      </ion-item>

      <ion-list slot="content">


      </ion-list>
    </ion-accordion>

    <ion-accordion value="signature">
      <ion-item color="dark" slot="header">
        <ion-label>Signature</ion-label>
      </ion-item>

      <ion-list slot="content">


      </ion-list>
    </ion-accordion>

    <ion-accordion value="images">
      <ion-item color="dark" slot="header">
        <ion-label>Images</ion-label>
      </ion-item>

      <ion-list slot="content">


      </ion-list>
    </ion-accordion>

    <ion-accordion value="tacklog" *ngIf="!isSim">
      <ion-item color="dark" slot="header">
        <ion-label>Track Log</ion-label>
      </ion-item>

      <ion-list slot="content">
        

      </ion-list>
    </ion-accordion>


  </ion-accordion-group>
  
</ion-content>

As seen multiple is true and I want ‘crew’, and ‘flighttimes’ to open by default.

However when the app loads, the first time I open the detailed modal the accordion works as expected with those 2 tabs open. However when I close the modal and re open the modal then it does not render correctly and all the tabs remain shut. This behaviours occurs after I open any accordion for the first time on the page. After which any accordion in the modal does not render correctly

Wondering if anyone has any ideas?

Thanks

Wondering if anyone has any possible cause/ fix for this?

I suggest open an issue in github and definitively create a reproducible repo for the ionic team

I have added a reproducable example to this git repo

If you run the app then click on open modal. Then close and reopen the modal the accordion tabs will remain shut

Opened an issue on git as well