bug(sidenav): sidenav width "jumps" when a scrollbar is added

[dario-piotrowicz]

Reproduction

Use StackBlitz to reproduce your issue:

• https://stackblitz.com/edit/angular-4psyzl?file=src%2Fapp%2Fsidenav-responsive-example.html

Steps to reproduce:

1. Click on the hamburger icon to open the menu
2. Click on "Add Item" until a scrollbar appear
3. notice behaviour
4. Can be repeated by clicking on "Remove Item" until the scrollbar disappears and then "Add" until it reappears

Expected Behavior

When the scrollbar needs to appear, the navbar width should be increased so that it can fit the scrollbar without delay
(possibly the width increase should happen before the scrollbar appears)

Actual Behavior

When the scrollbar needs to appear, it first appears and then the navbar increases in width so that it can fit the scrollbar
(possibly the width increase should happen before the scrollbar appears)

(not the best user experience)

Screenshot

From stackblitz:

From Angular.io/docs (at least I believe that it's the same bug):

(here you can see the chevron icons jumping when the scrollbar appears)
(I mentioned the issue here: angular/angular#42552)

Environment

• Angular: 12
• CDK/Material: 12.0.4
• Browser(s): Version 91.0.4472.101
• Operating System (e.g. Windows, macOS, Ubuntu): Ubuntu 20.04.2 LTS

[dario-piotrowicz]

Also I would like to mention that I've found a similar issue already present: #22909

But I believe that this two are likely two different bugs

[lgaida]

Hi @dario-piotrowicz
Have you tried using autosize on your sidenav-container?

[dario-piotrowicz]

Hi @lgaida I just noticed the stackblitz is no longer valid, I recreated it: https://stackblitz.com/edit/angular-4psyzl?file=src%2Fapp%2Fsidenav-responsive-example.html

and as you can see I added autosize but I don't think it's making any difference