[MatSidenav] Sidenav Toggling Can Cause Content Shifting

[aaronrcooper]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Mat-sidenav-content is not moved from original position upon quick mat-sidenav toggles

What is the current behavior?

Quick mat-sidenav toggles can cause mat-sidenav-content to be shifted over until the drawer is toggled again

What are the steps to reproduce?

Set the autofocus on mat-sidenav to true, and place a focusable input in the mat-sidenav
Click the 'open drawer' button quickly and repeatedly until the content shifts. Click the button again and the content will shift back.

https://stackblitz.com/edit/angular-eesonu

What is the use-case or motivation for changing an existing behavior?

Use-case: User accidentally opens the drawer and quickly presses again to undo the action. This will result in possibly all content on the page not being displayed.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular: 6.0.9
Material: 6.4.1

[cedricremond]

Hi!

This bug is still present in the latest Angular Material release (9.2.0).
I reproduced it here: https://stackblitz.com/edit/angular-ua4cyc.
Closing the sidenav and opening it quickly before it's completely closed cause a shift of the main content.

Is there a way to avoid this behavior?

EDIT: Adding [fixedToViewport]="true" to the sidenav container seems to fix the issue (https://stackblitz.com/edit/angular-pqkykw) but it's not always what we want.

[mmalerba]

confirmed, can still reproduce this with @aaronrcooper's example after updating the deps

[yayarokya]

Hi everyone. I can reproduce it as well.