diff --git a/core/src/components/accordion-group/accordion-group.tsx b/core/src/components/accordion-group/accordion-group.tsx index 7c4e780d06..ebe0e61a66 100644 --- a/core/src/components/accordion-group/accordion-group.tsx +++ b/core/src/components/accordion-group/accordion-group.tsx @@ -74,10 +74,12 @@ export class AccordionGroup implements ComponentInterface { @Event() ionValueChange!: EventEmitter; private hasEmittedInitialValue = false; + private isUserInitiatedChange = false; @Watch('value') valueChanged() { - this.emitValueChange(false); + this.emitValueChange(false, this.isUserInitiatedChange); + this.isUserInitiatedChange = false; } @Watch('disabled') @@ -179,6 +181,7 @@ export class AccordionGroup implements ComponentInterface { * accordion group to an array. */ private setValue(accordionValue: string | string[] | null | undefined) { + this.isUserInitiatedChange = true; const value = (this.value = accordionValue); this.ionChange.emit({ value }); } @@ -255,7 +258,7 @@ export class AccordionGroup implements ComponentInterface { return Array.from(this.el.querySelectorAll(':scope > ion-accordion')) as HTMLIonAccordionElement[]; } - private emitValueChange(initial: boolean) { + private emitValueChange(initial: boolean, isUserInitiated = false) { const { value, multiple } = this; if (!multiple && Array.isArray(value)) { @@ -280,7 +283,7 @@ export class AccordionGroup implements ComponentInterface { * Track if this is the initial value update so accordions * can skip transition animations when they first render. */ - const shouldMarkInitial = initial || (!this.hasEmittedInitialValue && value !== undefined); + const shouldMarkInitial = initial || (!this.hasEmittedInitialValue && value !== undefined && !isUserInitiated); this.ionValueChange.emit({ value, initial: shouldMarkInitial }); diff --git a/core/src/components/accordion/test/accordion.spec.ts b/core/src/components/accordion/test/accordion.spec.ts index a132772e02..436e03b7fb 100644 --- a/core/src/components/accordion/test/accordion.spec.ts +++ b/core/src/components/accordion/test/accordion.spec.ts @@ -273,6 +273,33 @@ it('should not animate when initial value is set after load', async () => { expect(firstAccordion.classList.contains('accordion-expanding')).toEqual(false); }); +it('should animate when accordion is first opened by user', async () => { + const page = await newSpecPage({ + components: [Item, Accordion, AccordionGroup], + html: ` + + + Label +
Content
+
+
+ `, + }); + + const accordionGroup = page.body.querySelector('ion-accordion-group')!; + + const details: AccordionGroupChangeEventDetail[] = []; + accordionGroup.addEventListener('ionValueChange', (event: CustomEvent) => { + details.push(event.detail); + }); + + await accordionGroup.requestAccordionToggle('first', true); + await page.waitForChanges(); + + const lastDetail = details[details.length - 1]; + expect(lastDetail?.initial).toBe(false); +}); + // Verifies fix for https://github.com/ionic-team/ionic-framework/issues/27047 it('should not have animated class when animated="false"', async () => { const page = await newSpecPage({