fix(expansion-panel): appearing as open if placed inside animating element

[crisbeto]

This is an alternate approach to #13888 which had to be reverted due to some presubmit issues. These changes address the problem by providing some default styles that will be applied if the expansion panel is inside an animating element.

[josephperrott]

This assumes that the height of the panels is going to be 48px and 64px. Does this account for if someone overrides those values using the @Inputs in the panel header?

[crisbeto]

It doesn't account for the case where people are setting it through the input, but I wasn't able to think of a better way to handle it.

[josephperrott]

I think we might need to reassess if we can try to do the fix from #13888 again.

I think the "correct" solution is for the containing components to allow the animations rather than the components which don't necessarily know what components they will be in.

Because While this is something that we are seeing in expansion-panel, the issue is actually in things like dialog/tabs and if someone has a custom component doing animations they will have the same issue we are seeing.

[virtuoushub]

In regards to #13888 and the revert of it in #14017,

This change broke an app inside of Google where tabs appear inside of a
dialog. The tabs get stuck in a weird frozen animation state.

Is there a test to make sure apps like the internal one mentioned above do not get caught in a weird animation state?

I want to contribute to solving #13870 in any way I am able, just not sure how to test this type of fix/regression.

[josephperrott]

@virtuoushub Unfortunately there is not a test to check it because we haven't been able to isolate it outside of the app for a reproduction. We haven't been able to create a test to check the situation in which it occurs, but with the change from #13888 the failure reproduced in the app with perfect consistency.

I am working with @matsko on sorting it out, but unfortunately we just haven't been able to sort it out yet.

[virtuoushub]

Thanks for the update. As @Teamop mentioned, whatever fix is decided on, does it relate to #11765 and it's respective PR #11778?

[simeyla]

Make sure to check that any fix considers the opposite case, where an already OPEN expansion panel is animated off the screen.

I have an accordian with represents a menu, so each panel contains a mat-nav-list of buttons (submenu). When I select a sub-option the whole menu should slide to the left offscreen, but instead the panel collapses itself first.

To try to figure out what's going on I set a very long animation duration (30s) and it seems that if I interact with the menu at all while it is animating on screen then I can't even open an accordion item once it's completed animating. If I don't click on any of the items during the animation then it works as normal when the animation is complete.

It's all extremely confusing to even figure out what's happening, but I think the fix is going to be beyond a few css tweaks.

[simeyla]

There's two shortcomings I've identified with this solution.

Issue 1) If you interact with the expansion panel during animation (open/close panels) then it can get in a completely stuck and broken state where you can't open or close any panels at all. My guess is that it's internally doing something with the height - which we've tampered with and therefore it gets confused.

Any usage of opacity or outline below is obviously just for demonstration purposes. You will probably have to see the parent animation duration to 30seconds to see what's going on.

Suggested css solution - prevent clicking during animation :

.mat-expansion-panel-header {

    .ng-animating .mat-expansion-panel &
    {
        pointer-events: none !important;
        opacity: .5;   // remove this
    }
}

.mat-expansion-panel-content {

    .ng-animating .mat-expansion-panel &
    {
        pointer-events: none !important;
        opacity: .5;   // remove this
    }
}

Issue 2)

If an expander item is open - such as an accordion containing groups of sub-menu items - then when it is animated off screen (:leave) you likely want it to remain open, but it closes.

To achieve that you need to also add this rule - or something equivalent:

.mat-expansion-panel-content {

    .ng-animating .mat-expansion-panel.mat-expanded & {
        height: auto !important;
        visibility: visible !important;
        outline: 1px solid orange;  // remove this
      }
  }

These additional changes seem to work ok for me on real iOS device and Chrome testing tools.

[crisbeto]

This shouldn't be necessary after the changes in #24529.

[angular-automatic-lock-bot]

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.}