javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(accordion): accordions expand when using binding (#25322)

Browse Source 
resolves #25307
This commit is contained in:
Liam DeBeasi
2022-05-20 09:43:04 -04:00
committed by GitHub
parent 60054310af
commit 61e571e585
9 changed files with 98 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
angular/test/test-app/e2e/src/accordion.spec.ts Normal file
View File

@ -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');
});
});

17
angular/test/test-app/src/app/accordion/accordion-modal/accordion-modal.component.html Normal file
View File

@ -0,0 +1,17 @@
<ion-content>
<ion-button id="dismiss" (click)="modal.dismiss()">Dismiss Modal</ion-button>
<ion-accordion-group [value]="'a'">
<ion-accordion value="a">
<ion-item slot="header">
<ion-label>A</ion-label>
</ion-item>
<div slot="content">A content</div>
</ion-accordion>
<ion-accordion value="b">
<ion-item slot="header">
<ion-label>B</ion-label>
</ion-item>
<div slot="content">B content</div>
</ion-accordion>
</ion-accordion-group>
</ion-content>

11
angular/test/test-app/src/app/accordion/accordion-modal/accordion-modal.component.ts Normal file
View File

@ -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() {}
}

13
angular/test/test-app/src/app/accordion/accordion.component.html Normal file
View File

@ -0,0 +1,13 @@
<ion-header>
<ion-toolbar>
<ion-buttons>
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>
Accordion test
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-button id="open-modal" (click)="open()">Open Modal</ion-button>
</ion-content>

22
angular/test/test-app/src/app/accordion/accordion.component.ts Normal file
View File

@ -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();
}
}

2
angular/test/test-app/src/app/app-routing.module.ts
View File

@ -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 },

6
angular/test/test-app/src/app/app.module.ts
View File

@ -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' }),

5
angular/test/test-app/src/app/home-page/home-page.component.html
View File

@ -62,5 +62,10 @@
Providers
</ion-label>
</ion-item>
<ion-item routerLink="/accordions">
<ion-label>
Accordions Test
</ion-label>
</ion-item>
</ion-list>
</ion-content>

16
core/src/components/accordion/accordion.tsx
View File

@ -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);
}