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