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

(2 件のコメント) (0 件のリアクション) (0 人の担当者)TypeScript (6,650 件のフォーク)batch import

P4area: material/sidenavhelp wanted

Repository metrics

Stars: (24,044 個のスター)
PR merge metrics: (平均マージ 3d 12h) (30d で 98 merged PRs)

説明

Reproduction

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

Steps to reproduce:

Close Sidenav 2 by clicking toggle button
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

Angular: 9
CDK/Material: 9.0.1
Browser(s): IE 11
Operating System (e.g. Windows, macOS, Ubuntu): WIndows

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.

コントリビューターガイド

調査方針: Investigate the scrollIntoView behavior when multiple sidenavs are present, specifically when one is closed. Look at the sidenav component's scroll container logic in the Angular Material source code (e.g., src/material/sidenav). The issue mentions it only happens in IE 11, so consider cross browser compatibility. There is a StackBlitz reproduction that can be used to isolate the problem. Check if there are any existing tests for scrollIntoView in the sidenav.
技術スタック: angulartypescripthtmlcss
領域: frontend
Issue 種別: バグ
難度: 3
推定時間: 半日
活動状況: 古い
明確さ: 明確
前提条件: Angular basicsCSS layoutscrollIntoView APIIE 11 testing
初心者向け度: 50