Skip to content
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.

Sign up for GitHub

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

Jump to bottom

bug(COMPONENT): MatExpansionPanel close when switching tabs(MatTabs) #21434

Closed
derianmarchan opened this issue Dec 24, 2020 · 4 comments · Fixed by #30119
Closed

bug(COMPONENT): MatExpansionPanel close when switching tabs(MatTabs) #21434

derianmarchan opened this issue Dec 24, 2020 · 4 comments · Fixed by #30119
Assignees
@crisbeto
Labels
area: material/expansion P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@derianmarchan
Copy link

derianmarchan commented Dec 24, 2020 •
edited
Loading

Bug report

The expansion panel closes automatically when you switch tabs and return, with the panel with the class ".mat-opened"

Packages

  • @angular/material/tabs
  • @angular/material/expansion

Environment

  • Angular: 11.0.0
  • CDK/Material: 11.0.0
  • Browser(s): Chrome / Edge

image
@derianmarchan derianmarchan added the needs triage This issue needs to be triaged by the team label Dec 24, 2020
@crisbeto
Copy link
Member

Can you post an example of it breaking? It's working for me here: https://stackblitz.com/edit/angular-oaf1rd?file=src/app/tab-group-basic-example.html

@derianmarchan
Copy link
Author

derianmarchan commented Dec 25, 2020 •
edited
Loading

I was checking the code and the problem is when declaring an animation within the component..

I modified your code for the example: https://stackblitz.com/edit/angular-oaf1rd-8jzvxb?file=src%2Fapp%2Ftab-group-basic-example.html

@crisbeto
Copy link
Member

I think that problem is due to the fact that @angular/animations blocks any child animations from running while a parent is animating. Since we use an animation to set the expansion panel's height, your custom animation will block it. Usually you can get this to work with animateChild, but I wasn't able to, presumably because the animations are defined in different modules. We've had similar issues in the past so it might be time to look into a workaround on our end.

@crisbeto crisbeto added area: material/expansion P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent and removed needs triage This issue needs to be triaged by the team labels Dec 28, 2020
@crisbeto crisbeto self-assigned this Dec 5, 2024
crisbeto added a commit to crisbeto/material2 that referenced this issue Dec 5, 2024
@crisbeto
fix(material/expansion): switch away from animations module
bcfd6c3 
Reworks the expansion panel to animate purely with CSS, rather than going through the `@angular/animations` module. This simplifies the setup and allows us to resolve several long-standing bug reports.

Fixes angular#27946.
Fixes angular#22715.
Fixes angular#21434.
Fixes angular#20610.
Fixes angular#20517.
Fixes angular#17177.
Fixes angular#16534.
Fixes angular#16503.
Fixes angular#14952.
Fixes angular#14759.
Fixes angular#14075.
Fixes angular#11765.
@crisbeto crisbeto mentioned this issue Dec 5, 2024
Merged
crisbeto added a commit to crisbeto/material2 that referenced this issue Dec 5, 2024
@crisbeto
fix(material/expansion): switch away from animations module
b35c757 
Reworks the expansion panel to animate purely with CSS, rather than going through the `@angular/animations` module. This simplifies the setup and allows us to resolve several long-standing bug reports.

Fixes angular#27946.
Fixes angular#22715.
Fixes angular#21434.
Fixes angular#20517.
Fixes angular#17177.
Fixes angular#16534.
Fixes angular#16503.
Fixes angular#14952.
Fixes angular#14759.
Fixes angular#14075.
Fixes angular#11765.
crisbeto added a commit that referenced this issue Dec 5, 2024
@crisbeto
fix(material/expansion): switch away from animations module (#30119)
7b64c45 
Reworks the expansion panel to animate purely with CSS, rather than going through the `@angular/animations` module. This simplifies the setup and allows us to resolve several long-standing bug reports.

Fixes #27946.
Fixes #22715.
Fixes #21434.
Fixes #20517.
Fixes #17177.
Fixes #16534.
Fixes #16503.
Fixes #14952.
Fixes #14759.
Fixes #14075.
Fixes #11765.

(cherry picked from commit aafa151)
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Jan 5, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@crisbeto crisbeto

Labels
area: material/expansion P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(material/expansion): switch away from animations module crisbeto/material2
2 participants
@crisbeto @derianmarchan