bug(sidenav): mat-drawer-opened class missing after rapid programmatic open/close

[sofiamonizf]

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

When rapidly toggling a mat-sidenav via programmatic open() and close() calls in quick succession, the mat-drawer-opened class is not applied to the mat-drawer element. The drawer is visually open with backdrop visible, but the required CSS class is missing, causing styling issues (missing shadows, margins, transitions).

Reproduction

StackBlitz link: https://stackblitz.com/edit/angular-v21-base-tsm1sscq?file=src%2Fmain.ts
Steps to reproduce:

1. Click on any item row in the master panel to open the drawer (calls drawer.open())
2. Press ESC key to close the drawer (triggers programmatic drawer.close())
3. Immediately click on an item row again (calls drawer.open())
4. Open DevTools and inspect the mat-drawer element

Expected Behavior

The mat-drawer element should contain the mat-drawer-opened class after open() is called, regardless of how rapidly the state changes occur. This class is required for proper styling (shadows, margins, transitions).

Actual Behavior

The mat-drawer element only has the following classes:

• mat-drawer
• mat-drawer-end
• mat-drawer-over
• mat-drawer-animating
  The mat-drawer-opened class is missing, even though the drawer is visually open with content and backdrop visible.

<div class="test-wrapper"><h3>🛡️ Pure Angular Material Drawer Test</h3><p class="description"> Click anywhere on an item's row or press its explicit button to slide out details and test the state. </p><mat-drawer-container class="mat-drawer-container example-container mat-drawer-container-explicit-backdrop mat-drawer-transition"><div class="mat-drawer-backdrop"></div><!--container--><!--mat-drawer-anchor--><mat-drawer-content class="mat-drawer-content example-content"><div class="master-panel"><div class="config-bar"><label>Mode: <select class="ng-untouched ng-pristine ng-valid"><option value="over">over</option><option value="side">side</option><option value="push">push</option></select></label><label>ESC Close: <select class="ng-untouched ng-pristine ng-valid"><option value="0: false">Enabled</option><option value="1: true">Disabled</option></select></label></div><div class="interactive-list"><button type="button" class="interactive-row-btn is-active"><div class="row-indicator"></div><div class="row-text-content"><div class="row-top-line"><span class="row-title">Portfolio Alpha (US Tech)</span><span class="row-badge" data-status="Active">Active</span></div><p class="row-subtext"> ID: 101 • Growth-focused collection of high-performing US technology e... </p></div><div class="action-trigger-area"><span class="action-pill">Open Details →</span></div></button><button type="button" class="interactive-row-btn"><div class="row-indicator"></div><div class="row-text-content"><div class="row-top-line"><span class="row-title">Portfolio Beta (EU Green Energy)</span><span class="row-badge" data-status="Restricted">Restricted</span></div><p class="row-subtext"> ID: 102 • Environmental, Social, and Governance (ESG) compliant assets... </p></div><div class="action-trigger-area"><span class="action-pill">Open Details →</span></div></button><button type="button" class="interactive-row-btn"><div class="row-indicator"></div><div class="row-text-content"><div class="row-top-line"><span class="row-title">Portfolio Gamma (Global Bonds)</span><span class="row-badge" data-status="Stable">Stable</span></div><p class="row-subtext"> ID: 103 • Conservative income generation strategy composed of stable g... </p></div><div class="action-trigger-area"><span class="action-pill">Open Details →</span></div></button><!--container--></div></div></mat-drawer-content><!--container--><div class="cdk-visually-hidden cdk-focus-trap-anchor" aria-hidden="true"></div><mat-drawer position="end" class="mat-drawer example-sidenav mat-drawer-end mat-drawer-over mat-drawer-animating" tabindex="-1"><div cdkscrollable="" class="mat-drawer-inner-container"><div class="drawer-content"><button mat-raised-button="" color="warn" class="mdc-button mat-mdc-button-base w-100 mdc-button--raised mat-mdc-raised-button mat-warn" mat-ripple-loader-class-name="mat-mdc-button-ripple"><span class="mat-mdc-button-persistent-ripple mdc-button__ripple"></span><span class="mdc-button__label"> Close Detail View </span><span class="mat-focus-indicator"></span><span class="mat-mdc-button-touch-target"></span><span class="mat-ripple mat-mdc-button-ripple"></span></button><h4>🔍 Detail Panel: Portfolio Alpha (US Tech)</h4><div class="meta-info"><p><strong>ID:</strong> 101</p><p><strong>Status:</strong><span class="badge">Active</span></p><p><strong>Description:</strong></p><p class="desc-text">Growth-focused collection of high-performing US technology equities including semiconductors, enterprise software, and infrastructure.</p></div><button mat-raised-button="" color="warn" class="mdc-button mat-mdc-button-base w-100 mdc-button--raised mat-mdc-raised-button mat-warn" mat-ripple-loader-uninitialized="" mat-ripple-loader-class-name="mat-mdc-button-ripple"><span class="mat-mdc-button-persistent-ripple mdc-button__ripple"></span><span class="mdc-button__label"> Close Detail View </span><span class="mat-focus-indicator"></span><span class="mat-mdc-button-touch-target"></span></button><p class="hint"> Click here, then press <strong>ESC</strong> to test native closing. </p></div><!--container--><!--container--></div></mat-drawer><div class="cdk-visually-hidden cdk-focus-trap-anchor" aria-hidden="true"></div></mat-drawer-container></div>

Environment

Two environments tested:

• Angular: ^21.1.2 (StackBlitz) / ^21.2.18 (local app)
• CDK/Material: ^21.1.2 (StackBlitz) / ^21.2.14 (local app)
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): macOS