diff --git a/angular/test/test-app/e2e/src/accordion.spec.ts b/angular/test/test-app/e2e/src/accordion.spec.ts
new file mode 100644
index 00000000000..93455838cf6
--- /dev/null
+++ b/angular/test/test-app/e2e/src/accordion.spec.ts
@@ -0,0 +1,19 @@
+describe('Accordion', () => {
+ beforeEach(() => {
+ cy.visit('/accordions');
+ });
+
+ it('should correctly expand on multiple modal opens', () => {
+ cy.get('#open-modal').click();
+
+ cy.get('ion-accordion:first-of-type').should('have.class', 'accordion-expanded');
+ cy.get('ion-accordion:last-of-type').should('not.have.class', 'accordion-expanded');
+
+ cy.get('#dismiss').click();
+
+ cy.get('#open-modal').click();
+
+ cy.get('ion-accordion:first-of-type').should('have.class', 'accordion-expanded');
+ cy.get('ion-accordion:last-of-type').should('not.have.class', 'accordion-expanded');
+ });
+});
diff --git a/angular/test/test-app/src/app/accordion/accordion-modal/accordion-modal.component.html b/angular/test/test-app/src/app/accordion/accordion-modal/accordion-modal.component.html
new file mode 100644
index 00000000000..2f00ed6bad9
--- /dev/null
+++ b/angular/test/test-app/src/app/accordion/accordion-modal/accordion-modal.component.html
@@ -0,0 +1,17 @@
+
+ Dismiss Modal
+
+
+
+ A
+
+ A content
+
+
+
+ B
+
+ B content
+
+
+
diff --git a/angular/test/test-app/src/app/accordion/accordion-modal/accordion-modal.component.ts b/angular/test/test-app/src/app/accordion/accordion-modal/accordion-modal.component.ts
new file mode 100644
index 00000000000..e73857b2251
--- /dev/null
+++ b/angular/test/test-app/src/app/accordion/accordion-modal/accordion-modal.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-accordion-modal',
+ templateUrl: './accordion-modal.component.html',
+})
+export class AccordionModalComponent {
+ modal: HTMLIonModalElement;
+
+ constructor() {}
+}
diff --git a/angular/test/test-app/src/app/accordion/accordion.component.html b/angular/test/test-app/src/app/accordion/accordion.component.html
new file mode 100644
index 00000000000..9545b2b11b9
--- /dev/null
+++ b/angular/test/test-app/src/app/accordion/accordion.component.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+ Accordion test
+
+
+
+
+ Open Modal
+
diff --git a/angular/test/test-app/src/app/accordion/accordion.component.ts b/angular/test/test-app/src/app/accordion/accordion.component.ts
new file mode 100644
index 00000000000..b815863747a
--- /dev/null
+++ b/angular/test/test-app/src/app/accordion/accordion.component.ts
@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+import { ModalController } from '@ionic/angular';
+import { AccordionModalComponent } from './accordion-modal/accordion-modal.component';
+
+@Component({
+ selector: 'app-accordion',
+ templateUrl: './accordion.component.html',
+})
+export class AccordionComponent {
+
+ constructor(
+ private modalCtrl: ModalController
+ ) { }
+
+ async open() {
+ const modal = await this.modalCtrl.create({
+ component: AccordionModalComponent,
+ animated: false,
+ });
+ await modal.present();
+ }
+}
diff --git a/angular/test/test-app/src/app/app-routing.module.ts b/angular/test/test-app/src/app/app-routing.module.ts
index 25170811710..be5ad94bb54 100644
--- a/angular/test/test-app/src/app/app-routing.module.ts
+++ b/angular/test/test-app/src/app/app-routing.module.ts
@@ -20,9 +20,11 @@ import { NavigationPage1Component } from './navigation-page1/navigation-page1.co
import { NavigationPage2Component } from './navigation-page2/navigation-page2.component';
import { NavigationPage3Component } from './navigation-page3/navigation-page3.component';
import { AlertComponent } from './alert/alert.component';
+import { AccordionComponent } from './accordion/accordion.component';
const routes: Routes = [
{ path: '', component: HomePageComponent },
+ { path: 'accordions', component: AccordionComponent },
{ path: 'alerts', component: AlertComponent },
{ path: 'inputs', component: InputsComponent },
{ path: 'form', component: FormComponent },
diff --git a/angular/test/test-app/src/app/app.module.ts b/angular/test/test-app/src/app/app.module.ts
index 9eed88d96d5..563932b73d6 100644
--- a/angular/test/test-app/src/app/app.module.ts
+++ b/angular/test/test-app/src/app/app.module.ts
@@ -30,6 +30,8 @@ import { NavigationPage1Component } from './navigation-page1/navigation-page1.co
import { NavigationPage2Component } from './navigation-page2/navigation-page2.component';
import { NavigationPage3Component } from './navigation-page3/navigation-page3.component';
import { AlertComponent } from './alert/alert.component';
+import { AccordionComponent } from './accordion/accordion.component';
+import { AccordionModalComponent } from './accordion/accordion-modal/accordion-modal.component';
@NgModule({
declarations: [
@@ -56,7 +58,9 @@ import { AlertComponent } from './alert/alert.component';
NavigationPage1Component,
NavigationPage2Component,
NavigationPage3Component,
- AlertComponent
+ AlertComponent,
+ AccordionComponent,
+ AccordionModalComponent
],
imports: [
BrowserModule.withServerTransition({ appId: 'serverApp' }),
diff --git a/angular/test/test-app/src/app/home-page/home-page.component.html b/angular/test/test-app/src/app/home-page/home-page.component.html
index 8609ca69976..741812dc791 100644
--- a/angular/test/test-app/src/app/home-page/home-page.component.html
+++ b/angular/test/test-app/src/app/home-page/home-page.component.html
@@ -62,5 +62,10 @@
Providers
+
+
+ Accordions Test
+
+
diff --git a/core/src/components/accordion/accordion.tsx b/core/src/components/accordion/accordion.tsx
index 50edcf16814..425103509b2 100644
--- a/core/src/components/accordion/accordion.tsx
+++ b/core/src/components/accordion/accordion.tsx
@@ -211,7 +211,8 @@ export class Accordion implements ComponentInterface {
};
private expandAccordion = (initialUpdate = false) => {
- if (initialUpdate) {
+ const { contentEl, contentElWrapper } = this;
+ if (initialUpdate || contentEl === undefined || contentElWrapper === undefined) {
this.state = AccordionState.Expanded;
return;
}
@@ -220,11 +221,6 @@ export class Accordion implements ComponentInterface {
return;
}
- const { contentEl, contentElWrapper } = this;
- if (contentEl === undefined || contentElWrapper === undefined) {
- return;
- }
-
if (this.currentRaf !== undefined) {
cancelAnimationFrame(this.currentRaf);
}
@@ -250,7 +246,8 @@ export class Accordion implements ComponentInterface {
};
private collapseAccordion = (initialUpdate = false) => {
- if (initialUpdate) {
+ const { contentEl } = this;
+ if (initialUpdate || contentEl === undefined) {
this.state = AccordionState.Collapsed;
return;
}
@@ -259,11 +256,6 @@ export class Accordion implements ComponentInterface {
return;
}
- const { contentEl } = this;
- if (contentEl === undefined) {
- return;
- }
-
if (this.currentRaf !== undefined) {
cancelAnimationFrame(this.currentRaf);
}