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,18 @@ 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;
+
+  /**
+   * Tracks if this accordion has ever been expanded.
+   * Used to prevent the first expansion from animating.
+   */
+  private hasEverBeenExpanded = false;
 
   /**
    * The value of the accordion. Defaults to an autogenerated
@@ -130,17 +144,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();
@@ -239,6 +242,11 @@ export class Accordion implements ComponentInterface {
     const { contentEl, contentElWrapper } = this;
     if (initialUpdate || contentEl === undefined || contentElWrapper === undefined) {
       this.state = AccordionState.Expanded;
+      /**
+       * Mark that this accordion has been expanded at least once.
+       * Do this even on initial expansion so future interactions animate.
+       */
+      this.hasEverBeenExpanded = true;
       return;
     }
 
@@ -250,6 +258,12 @@ export class Accordion implements ComponentInterface {
       cancelAnimationFrame(this.currentRaf);
     }
 
+    /**
+     * Mark that this accordion has been expanded at least once.
+     * This allows subsequent expansions to animate.
+     */
+    this.hasEverBeenExpanded = true;
+
     if (this.shouldAnimate()) {
       raf(() => {
         this.state = AccordionState.Expanding;
@@ -315,11 +329,15 @@ 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.
+     *
+     * Additionally, don't animate the very first expansion even if
+     * hasInteracted is true. This handles edge cases like React StrictMode
+     * where effects run twice and might incorrectly mark as interacted.
      */
-    if (!this.hasRendered) {
+    if (!this.hasInteracted || !this.hasEverBeenExpanded) {
       return false;
     }
 
@@ -418,6 +436,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