Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v8.x

Current Behavior

When setting an ion-accordion to be initially open by using [value]='...' on the ion-accordion-group, the accordion is first rendered closed and then animates open.

Expected Behavior

The initial state when the accordion first loads should not play an animation.

Steps to Reproduce

1. Go to the code reproduction URL
2. Click the reload button in the Stackblitz browser preview
3. Observe that the accordions in the first two columns play an animation (they use [value]="..."), while the last column doesn't (it uses value="..."). In all cases the actual value is constant.

Code Reproduction URL

https://stackblitz.com/edit/ion-accordion-initial-animation-bug?file=src%2Fapp%2Fexample.component.html

Ionic Info

Ionic:

Ionic CLI : 7.2.1
Ionic Framework : @ionic/angular 8.7.2
@angular-devkit/build-angular : 20.1.5
@angular-devkit/schematics : 20.1.5
@angular/cli : 20.1.5
@ionic/angular-toolkit : 12.2.0

Utility:

cordova-res : not installed globally
native-run : not installed globally

System:

NodeJS : v20.19.1 (/usr/local/bin/node)
npm : 10.8.2
OS : Linux 5.0

Additional Information

The issue is a regression since v8.6.0. The issue didn't occur with v8.5.9.

The issue #28506 was similar and the cause for this issue might be related to component initialization order. The initial values for Angular inputs are sometimes set after the Stencil component has fully initialized.
Issue #30552 was also a timing issue (but using React instead of Angular) where a property of ion-tab was not set in time for the first render. This was also introduced in v8.6.0.

I suspect the Stencil update from 4.20.0 to 4.29.3 (#30132) changed something about the timings on component initialization.