Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

fix(accordion-group): skip initial animation #30729

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ShaneK wants to merge 7 commits into main
base: main
Choose a base branch
Loading
from FW-6730
Open

fix(accordion-group): skip initial animation #30729

ShaneK wants to merge 7 commits into main from FW-6730

Conversation

@ShaneK
Copy link
Member

@ShaneK ShaneK commented Oct 16, 2025
edited
Loading

Issue number: resolves #30613


What is the current behavior?

Currently, when you load an accordion group, the initially selected accordion animates open. This is an unexpected change caused by upgrading Stencil to >= 4.21.0, which changed the way component lifecycles got triggered.

What is the new behavior?

With this change, we're waiting for the accordion in the accordion group to render and telling it if the update it's going through is the initial update or not. This allows it to decide to animate properly.

Does this introduce a breaking change?

  • Yes
  • No

Other information

Current dev build:

8.7.8-dev.11761141403.190ebfba

exorex and aeharding reacted with thumbs up emoji
@ShaneK ShaneK requested a review from a team as a code owner October 16, 2025 12:11
@ShaneK ShaneK requested a review from thetaPC October 16, 2025 12:11
Copy link

vercel bot commented Oct 16, 2025
edited
Loading

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Comments Updated (UTC)
ionic-framework Ready Ready Preview Comment Oct 22, 2025 1:56pm

@github-actions github-actions bot added the package: core @ionic/core package label Oct 16, 2025
Copy link
Contributor

@ShaneK Thanks for fixing this!

It looks great in the main react use examples, but I did find the following case where it doesn't animate initially. It used to work before but maybe I'm not doing things right I just wanted to let you know :P

https://stackblitz.com/edit/dbaxphvw-jt3durvs?file=src%2Fmain.tsx

Copy link
Member Author

ShaneK commented Oct 20, 2025
edited
Loading

@aeharding

@ShaneK Thanks for fixing this!

It looks great in the main react use examples, but I did find the following case where it doesn't animate initially. It used to work before but maybe I'm not doing things right I just wanted to let you know :P

https://stackblitz.com/edit/dbaxphvw-jt3durvs?file=src%2Fmain.tsx

Excellent catch, new dev build should address this.

8.7.8-dev.11760975768.12095f2f
aeharding reacted with heart emoji

Copy link
Contributor

Thanks works great!

ShaneK reacted with rocket emoji

const firstAccordion = accordionGroup.querySelector('ion-accordion[value="first"]')!;

expect(firstAccordion.classList.contains('accordion-expanded')).toEqual(true);
expect(firstAccordion.classList.contains('accordion-expanding')).toEqual(false);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I didn't realize that spec tests capture these kinds of classes. I would have expected it to be false all the time since expect would run after the animation ended. I'll have to keep this in mind for future tests. Thanks!

ShaneK reacted with rocket emoji
Copy link
Contributor

@thetaPC thetaPC left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm still seeing the arrows animate in the React app. Angular app is working well with the dev build, no animation on the accordions including the arrows.

Copy link
Member Author

ShaneK commented Oct 21, 2025

@thetaPC

I'm still seeing the arrows animate in the React app. Angular app is working well with the dev build, no animation on the accordions including the arrows.

Okay, I think I've got it! New dev build:

8.7.8-dev.11761061696.163f32a5

Copy link
Contributor

@thetaPC thetaPC left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, minor request

Copy link
Contributor

@thetaPC thetaPC left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

Copy link
Member

@brandyscarney brandyscarney left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I found an issue with expanded accordions on the basic test. They do not animate on collapse:

accordion-branch.mov

...kip state and allow animations on first interaction
Copy link
Member Author

ShaneK commented Oct 22, 2025

I found an issue with expanded accordions on the basic test. They do not animate on collapse:
[...]

New dev build:

8.7.8-dev.11761141403.190ebfba

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@brandyscarney brandyscarney brandyscarney requested changes

@thetaPC thetaPC thetaPC approved these changes

Requested changes must be addressed to merge this pull request.

Assignees

No one assigned

Labels

package: core @ionic/core package

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

bug: ion-accordion plays animation on initial state update when using Angular property binding

AltStyle によって変換されたページ (->オリジナル) /