Ionic accordion does not re render inside a modal component

Ionic Framework Ionic Angular
#1

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

#2

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

#3

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

#4

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

#5

Opened an issue on git as well