From 90ebfba6d7079ddfc91b2985a41c094832374471 Mon Sep 17 00:00:00 2001 From: ShaneK Date: Wed, 22 Oct 2025 06:46:57 -0700 Subject: [PATCH] fix(accordion): re-rendering after intitial load to reset animation skip state and allow animations on first interaction --- core/src/components/accordion/accordion.tsx | 12 ++++++++++-- core/src/components/accordion/test/accordion.spec.ts | 2 -- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/core/src/components/accordion/accordion.tsx b/core/src/components/accordion/accordion.tsx index 328ed845bf..3e6c835eb7 100644 --- a/core/src/components/accordion/accordion.tsx +++ b/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 = () => { diff --git a/core/src/components/accordion/test/accordion.spec.ts b/core/src/components/accordion/test/accordion.spec.ts index 9350c91dfc..033ee00f8f 100644 --- a/core/src/components/accordion/test/accordion.spec.ts +++ b/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 () => {