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(MatExpansionPanel): not respecting expanded property / mat-menu forcing panels to close #20517

Closed
Venipa opened this issue Sep 9, 2020 · 7 comments · Fixed by #30119
Closed

bug(MatExpansionPanel): not respecting expanded property / mat-menu forcing panels to close #20517

Venipa opened this issue Sep 9, 2020 · 7 comments · Fixed by #30119
Assignees
@crisbeto
Labels
animation This issue is related to Angular animations or CSS animations area: material/menu P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@Venipa
Copy link

Venipa commented Sep 9, 2020

Reproduction

https://stackblitz.com/edit/components-issue-pj9d3a?file=src%2Fapp%2Fexample-component.html

Steps to reproduce:

  1. mat menu
  2. mat-accordion with panel elements with some of them expanded from the start
  3. open menu
  4. all panels are open/expanded
  5. close menu
  6. reopen menu
  7. all expanded panels are now closed

Expected Behavior

What behavior were you expecting to see?
expanded panel after reopening mat-menu

Actual Behavior

What behavior did you actually see?
closes any expanded panel after reopening mat-menu

Environment

  • Angular: 10.0.8
  • CDK/Material: 10.1.3
  • Browser(s): Chrome
  • Operating System (e.g. Windows, macOS, Ubuntu): Windows
@Venipa Venipa added the needs triage This issue needs to be triaged by the team label Sep 9, 2020
@Venipa
Copy link
Author

Venipa commented Sep 11, 2020

according to the behavior the expanded property is still respected except for the content.
the content is "not loaded/rendered" but it is "expanded"

@crisbeto
Copy link
Member

crisbeto commented Sep 13, 2020 •
edited
Loading

My bet is this is due to the menu blocking child animations while it's animating since the expanded/collapsed state of the accordion depends on an animation. It can be seen on repeat opens since the current release has a bug where the menu only animates on the first open: note how the first time it's closed, the accordion gets collapsed, but then it's fine if you keep opening and closing it.

@crisbeto crisbeto added animation This issue is related to Angular animations or CSS animations area: material/menu 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 Sep 13, 2020
@Venipa
Copy link
Author

Venipa commented Sep 14, 2020

My guess it's a cdk issue, tried making an own menu but it still happened

@crisbeto crisbeto mentioned this issue Oct 11, 2020
Open
@szymonlisiecki
Copy link

note how the first time it's closed, the accordion gets collapsed, but then it's fine if you keep opening and closing it.

I've got exact same problem. First of all, accordions are closed on the first focusout from mat menu, and then the first opening/closing is without animations. Also accordion opens on the second click (just the first time).

Any updates on that issue?

@Bobbitoo
Copy link

Bobbitoo commented Nov 22, 2023 •
edited
Loading

I have the same problem. Any updates on that issue?

@rakshitongit
Copy link

rakshitongit commented Feb 22, 2024 •
edited
Loading

I have the same problem. Any updates on this issue? :(

@niralishah1599
Copy link

I am facing same issue. please let me know how to resolve this issue.

@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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@crisbeto crisbeto

Labels
animation This issue is related to Angular animations or CSS animations area: material/menu 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
6 participants
@crisbeto @Venipa @rakshitongit @szymonlisiecki @Bobbitoo @niralishah1599