fix(accordion): animating open if the first opening is done by the user

Author: ShaneK

core/src/components/accordion-group/accordion-group.tsx

@@ -74,10 +74,12 @@ export class AccordionGroup implements ComponentInterface {
   @Event() ionValueChange!: EventEmitter<AccordionGroupChangeEventDetail>;
 
   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 });
 

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: `
+      <ion-accordion-group>
+        <ion-accordion value="first">
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `,
+  });
+
+  const accordionGroup = page.body.querySelector('ion-accordion-group')!;
+
+  const details: AccordionGroupChangeEventDetail[] = [];
+  accordionGroup.addEventListener('ionValueChange', (event: CustomEvent<AccordionGroupChangeEventDetail>) => {
+    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({