fix(accordion): trying to prevent animation based on interaction rather than render

Author: ShaneK

core/src/components/accordion/accordion.tsx

@@ -41,6 +41,14 @@ export class Accordion implements ComponentInterface {
   private accordionGroupEl?: HTMLIonAccordionGroupElement | null;
   private updateListener = (ev: CustomEvent<AccordionGroupChangeEventDetail>) => {
     const initialUpdate = ev.detail?.initial ?? false;
+    /**
+     * If this is not an initial update (meaning it's from a user interaction
+     * or programmatic call after load), mark that we've had an interaction.
+     * This enables animations for this and future updates.
+     */
+    if (!initialUpdate) {
+      this.hasInteracted = true;
+    }
     this.updateState(initialUpdate);
   };
   private contentEl: HTMLDivElement | undefined;
@@ -55,12 +63,12 @@ export class Accordion implements ComponentInterface {
   @State() isNext = false;
   @State() isPrevious = false;
   /**
-   * Tracks whether the component has completed its initial render.
-   * Animations are disabled until after the first render completes.
-   * This prevents the accordion from animating when it starts
-   * expanded or collapsed on initial load.
+   * Tracks whether a user-initiated interaction has occurred.
+   * Animations are disabled until the first interaction happens.
+   * This prevents the accordion from animating when it's programmatically
+   * set to an expanded or collapsed state on initial load.
    */
-  @State() hasRendered = false;
+  @State() hasInteracted = false;
 
   /**
    * The value of the accordion. Defaults to an autogenerated
@@ -130,17 +138,6 @@ export class Accordion implements ComponentInterface {
     });
   }
 
-  componentDidRender() {
-    /**
-     * After the first render completes, mark that we've rendered.
-     * Setting this state property triggers a re-render, at which point
-     * animations will be enabled. This ensures animations are disabled
-     * only for the initial render, avoiding unwanted animations on load.
-     */
-    if (!this.hasRendered) {
-      this.hasRendered = true;
-    }
-  }
 
   private setItemDefaults = () => {
     const ionItem = this.getSlottedHeaderIonItem();
@@ -315,11 +312,11 @@ export class Accordion implements ComponentInterface {
    */
   private shouldAnimate = () => {
     /**
-     * Don't animate until after the first render cycle completes.
+     * Don't animate until after the first user interaction.
      * This prevents animations on initial load when accordions
-     * start in an expanded or collapsed state.
+     * start in an expanded or collapsed state programmatically.
      */
-    if (!this.hasRendered) {
+    if (!this.hasInteracted) {
       return false;
     }
 
@@ -418,6 +415,12 @@ export class Accordion implements ComponentInterface {
 
     if (disabled || readonly) return;
 
+    /**
+     * Mark that the user has interacted with the accordion.
+     * This enables animations for all future state changes.
+     */
+    this.hasInteracted = true;
+
     if (accordionGroupEl) {
       /**
        * Because the accordion group may or may