bug(sidenav): drawer leaves empty space if closing animation is interrupted

[P4]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

We have a component in our app with a relatively complex layout involving a drawer nested inside a tab.

The drawer opens when user starts to edit an object and closes if they finish or cancel. Switching tabs mid-editing also cancels the operation, however in this scenario the drawer doesn't close properly and leaves behind an empty space inside the drawer container.

Reproduction

StackBlitz link: https://stackblitz.com/edit/i8ms9yfx?file=src%2Fexample%2Fexample.html
Steps to reproduce:

1. Press "Toggle" to open the drawer
2. Switch to the second tab
3. Switch back to the first tab

Expected Behavior

Drawer should be fully closed, same as when pressing the Toggle button.

Actual Behavior

Drawer is stuck in some intermediate state, resulting in drawer-sized empty space being left behind

• <mat-drawer-content> still has margin-left equal to the drawer's width
• <mat-drawer> is stuck with mat-drawer-animating, from debugging it seems that the transitionend event which clears it never fires
• part of it seems to be due to mat-tab-group having animations disabled; if I turn them back on, there's probably enough time for the drawer closing animation to finish

Opening the drawer, then closing without leaving the tab restores it to its normal state. Resizing the window also seems to cause the drawer to recalculate the space and remove it.

Environment

• Angular: 20.3.17, reproduced on 21.1.2
• CDK/Material: 20.2.14, reproduced on 21.1.2
• Browser(s): Chrome 146.0.7680.80 (Official Build) (64-bit), Firefox 148.0.2
• Operating System (e.g. Windows, macOS, Ubuntu): Fedora Linux, Windows

[P4]

A workaround for my specific case is to enable preserveContent on <mat-tab-group>, then the component containing the drawer is not detached from the DOM and the transition event fires properly.