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

Author: ShaneK

core/src/components/accordion/accordion.tsx

@@ -41,6 +41,53 @@ 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,
+      'currentState:',
+      this.state
+    );
+
+    /**
+     * Determine if this update will cause an actual state change.
+     * We only want to mark as "interacted" if the state is changing.
+     */
+    const accordionGroup = this.accordionGroupEl;
+    if (accordionGroup) {
+      const value = accordionGroup.value;
+      const accordionValue = this.value;
+      const shouldExpand = Array.isArray(value) ? value.includes(accordionValue) : value === accordionValue;
+      const isExpanded = this.state === AccordionState.Expanded || this.state === AccordionState.Expanding;
+      const stateWillChange = shouldExpand !== isExpanded;
+
+      console.log(
+        '[Accordion]',
+        this.value,
+        'shouldExpand:',
+        shouldExpand,
+        'isExpanded:',
+        isExpanded,
+        'stateWillChange:',
+        stateWillChange
+      );
+
+      /**
+       * If this is not an initial update AND the state is actually changing,
+       * mark that we've had an interaction. This prevents redundant updates
+       * (like React StrictMode re-renders) from incorrectly enabling animations.
+       */
+      if (!initialUpdate && stateWillChange) {
+        console.log('[Accordion]', this.value, 'Setting hasInteracted to true');
+        this.hasInteracted = true;
+      }
+    }
+
     this.updateState(initialUpdate);
   };
   private contentEl: HTMLDivElement | undefined;
@@ -55,12 +102,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,18 +183,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();
     if (!ionItem) {
@@ -236,21 +277,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 +372,23 @@ 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 +487,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 +513,20 @@ 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 +545,7 @@ export class Accordion implements ComponentInterface {
           'accordion-disabled': disabled,
           'accordion-readonly': readonly,
 
-          'accordion-animated': this.shouldAnimate(),
+          'accordion-animated': shouldAnimate,
         }}
       >
         <div