fix(accordion): re-rendering after intitial load to reset animation skip state and allow animations on first interaction

Author: ShaneK

core/src/components/accordion/accordion.tsx

@@ -1,5 +1,5 @@
 import type { ComponentInterface } from '@stencil/core';
-import { Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';
+import { Component, Element, Host, Prop, State, Watch, forceUpdate, h } from '@stencil/core';
 import { addEventListener, getElementRoot, raf, removeEventListener, transitionEndAsync } from '@utils/helpers';
 import { chevronDown } from 'ionicons/icons';
 
@@ -132,7 +132,15 @@ export class Accordion implements ComponentInterface {
   }
 
   componentDidRender() {
-    this.skipNextAnimation = false;
+    if (this.skipNextAnimation) {
+      this.skipNextAnimation = false;
+      /**
+       * The initial render disables animations so framework-provided
+       * values do not cause the accordion to animate. Force a repaint
+       * so subsequent user interactions animate as expected.
+       */
+      forceUpdate(this);
+    }
   }
 
   private setItemDefaults = () => {

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

@@ -234,7 +234,6 @@ 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 () => {
@@ -272,7 +271,6 @@ 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 () => {