fix(accordion-group): skipping initial arrow animation

Author: ShaneK

core/src/components/accordion/accordion.tsx

@@ -48,6 +48,7 @@ export class Accordion implements ComponentInterface {
   private headerEl: HTMLDivElement | undefined;
 
   private currentRaf: number | undefined;
+  private skipNextAnimation = false;
 
   @Element() el?: HTMLElement;
 
@@ -295,6 +296,10 @@ export class Accordion implements ComponentInterface {
    * of what is set in the config.
    */
   private shouldAnimate = () => {
+    if (this.skipNextAnimation) {
+      return false;
+    }
+
     if (typeof (window as any) === 'undefined') {
       return false;
     }
@@ -316,6 +321,13 @@ export class Accordion implements ComponentInterface {
     return true;
   };
 
+  private disableAnimationTemporarily() {
+    this.skipNextAnimation = true;
+    raf(() => {
+      this.skipNextAnimation = false;
+    });
+  }
+
   private updateState = async (initialUpdate = false) => {
     const accordionGroup = this.accordionGroupEl;
     const accordionValue = this.value;
@@ -327,6 +339,11 @@ export class Accordion implements ComponentInterface {
     const value = accordionGroup.value;
 
     const shouldExpand = Array.isArray(value) ? value.includes(accordionValue) : value === accordionValue;
+    const shouldDisableAnimation = initialUpdate && shouldExpand;
+
+    if (shouldDisableAnimation) {
+      this.disableAnimationTemporarily();
+    }
 
     if (shouldExpand) {
       this.expandAccordion(initialUpdate);

core/src/components/accordion/test/accordion.spec.ts

@@ -234,6 +234,7 @@ it('should not animate when initial value is set before load', async () => {
 
   expect(firstAccordion.classList.contains('accordion-expanded')).toEqual(true);
   expect(firstAccordion.classList.contains('accordion-expanding')).toEqual(false);
+  expect(firstAccordion.classList.contains('accordion-animated')).toEqual(false);
 });
 
 it('should not animate when initial value is set after load', async () => {
@@ -271,6 +272,7 @@ it('should not animate when initial value is set after load', async () => {
 
   expect(firstAccordion.classList.contains('accordion-expanded')).toEqual(true);
   expect(firstAccordion.classList.contains('accordion-expanding')).toEqual(false);
+  expect(firstAccordion.classList.contains('accordion-animated')).toEqual(false);
 });
 
 it('should animate when accordion is first opened by user', async () => {
@@ -298,6 +300,9 @@ it('should animate when accordion is first opened by user', async () => {
 
   const lastDetail = details[details.length - 1];
   expect(lastDetail?.initial).toBe(false);
+
+  const firstAccordion = accordionGroup.querySelector('ion-accordion[value="first"]')!;
+  expect(firstAccordion.classList.contains('accordion-animated')).toEqual(true);
 });
 
 // Verifies fix for https://github.com/ionic-team/ionic-framework/issues/27047