search

angular / components

Component infrastructure and Material Design components for Angular
https://material.angular.io
MIT License
24.37k stars 6.75k forks source link

bug(Sidenav): Using scrollIntoView() with multiple sidenavs #20447

Open raymondkarstensen opened 4 years ago

raymondkarstensen commented 4 years ago

Reproduction

https://angular-9-multiple-sidenav-scrollintoview-issue-1.stackblitz.io

Steps to reproduce:

  1. Close Sidenav 2 by clicking toggle button
  2. Run the following in browsers console: document.getElementsByClassName('mat-drawer-content')[0].scrollIntoView()

Expected Behavior

In this example nothing should happen.

Note: The scrollIntoView function works as intended. In this example nothing happens since content is too small to make page scrollable.

Actual Behavior

Entire page slides left. Notice how Sidenav 1 disappears. To better visualize the issue, you can at this point toggle sidenav 1. Button for sidenav 1 will no slide left out of view.

Environment

Other Notes

This issue ONLY happens when Sidenav 2 is closed. There is no issue if Sidenav 1 is closed, or both sidenavs is closed or opened.

crisbeto commented 4 years ago

I suspect that may have to use display: none when hiding the sidenavs instead of the visibility: hidden we have now, but it can cause issues with the animation.

raymondkarstensen commented 4 years ago

Did a quick test and changed from visibility: hidden to display: none on the mat-sidenav element, and the page did not move left as described in issue.