Skip to content

bug(sidenav): mat-sidenav-content inert, cannot interact anymore #33441

Description

@JCornat

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

21.2.17

Description

In Angular 22.0.2, I have a blocking issue with the sidenav content.

The inert attribute is not removed when the sidenav is opened, and pass from the state "over" to the state "side", while still open : then the "mat-sidenav-content" content cannot be interact anymore.

In order to fix the issue on my side, I have to reimplement the "inert" attribute with [attr.inert]="(sidenavOpened() && sidenavMode() === 'over') ? 'true' : undefined"

Reproduction

StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-5bry2a2v?file=src%2Fmain.ts
Steps to reproduce: Click on the button "Trigger bug", then you cannot interact anymore with the buttons in content

There is no issue with Angular 21 : https://stackblitz.com/edit/stackblitz-starters-dkqqowgc?file=src%2Fmain.ts

Expected Behavior

To be able to interact with the "mat-sidenav-content" 's content

Actual Behavior

Cannot interact with the "mat-sidenav-content" 's content

Environment

  • Angular: 22.0.2
  • CDK/Material: 22.0.2

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions