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

Author: ShaneK

core/src/components/accordion/accordion.tsx

@@ -41,6 +41,16 @@ export class Accordion implements ComponentInterface {
   private accordionGroupEl?: HTMLIonAccordionGroupElement | null;
   private updateListener = (ev: CustomEvent<AccordionGroupChangeEventDetail>) => {
     const initialUpdate = ev.detail?.initial ?? false;
+    console.log('[Accordion]', this.value, 'updateListener - initial:', initialUpdate, 'hasInteracted:', this.hasInteracted, 'hasEverBeenExpanded:', this.hasEverBeenExpanded);
+    /**
+     * 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) {
+      console.log('[Accordion]', this.value, 'Setting hasInteracted to true');
+      this.hasInteracted = true;
+    }
     this.updateState(initialUpdate);
   };
   private contentEl: HTMLDivElement | undefined;
@@ -55,12 +65,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() hasInteracted = false;
+
+  /**
+   * Tracks if this accordion has ever been expanded.
+   * Used to prevent the first expansion from animating.
    */
-  @State() hasRendered = false;
+  private hasEverBeenExpanded = false;
 
   /**
    * The value of the accordion. Defaults to an autogenerated
@@ -130,17 +146,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();
@@ -236,21 +241,37 @@ export class Accordion implements ComponentInterface {
   };
 
   private expandAccordion = (initialUpdate = false) => {
+    console.log('[Accordion]', this.value, 'expandAccordion - initialUpdate:', initialUpdate, 'state:', this.state);
     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;
+      console.log('[Accordion]', this.value, 'expandAccordion early return - hasEverBeenExpanded set to true');
       return;
     }
 
     if (this.state === AccordionState.Expanded) {
+      console.log('[Accordion]', this.value, 'expandAccordion - already expanded, returning');
       return;
     }
 
     if (this.currentRaf !== undefined) {
       cancelAnimationFrame(this.currentRaf);
     }
 
+    /**
+     * Mark that this accordion has been expanded at least once.
+     * This allows subsequent expansions to animate.
+     */
+    this.hasEverBeenExpanded = true;
+    console.log('[Accordion]', this.value, 'expandAccordion - hasEverBeenExpanded set to true');
+
     if (this.shouldAnimate()) {
+      console.log('[Accordion]', this.value, 'expandAccordion - will animate');
       raf(() => {
         this.state = AccordionState.Expanding;
 
@@ -315,11 +336,16 @@ 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) {
+      console.log('[Accordion]', this.value, 'shouldAnimate: false - hasInteracted:', this.hasInteracted, 'hasEverBeenExpanded:', this.hasEverBeenExpanded);
       return false;
     }
 
@@ -418,6 +444,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
@@ -438,6 +470,9 @@ export class Accordion implements ComponentInterface {
     const expanded = this.state === AccordionState.Expanded || this.state === AccordionState.Expanding;
     const headerPart = expanded ? 'header expanded' : 'header';
     const contentPart = expanded ? 'content expanded' : 'content';
+    const shouldAnimate = this.shouldAnimate();
+
+    console.log('[Accordion]', this.value, 'render - state:', this.state, 'shouldAnimate:', shouldAnimate, 'hasInteracted:', this.hasInteracted, 'hasEverBeenExpanded:', this.hasEverBeenExpanded);
 
     this.setAria(expanded);
 
@@ -456,7 +491,7 @@ export class Accordion implements ComponentInterface {
           'accordion-disabled': disabled,
           'accordion-readonly': readonly,
 
-          'accordion-animated': this.shouldAnimate(),
+          'accordion-animated': shouldAnimate,
         }}
       >
         <div