angular/components

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

Open

#20,447 opened on 2020年8月28日

GitHub で見る
 (2 comments) (0 reactions) (0 assignees)TypeScript (24,044 stars) (6,650 forks)batch import
P4area: material/sidenavhelp wanted

説明

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

  • 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.

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

技術スタック
angulartypescripthtmlcss
領域
frontend
Issue 種別
bug
難度新しい貢献者にとっての実装難度です。1 は非常に小さな変更、5 は専門的な作業です。
3
推定時間経験ある貢献者が調査、実装、テスト、pull request 準備にかけるおおよその時間範囲です。
half day
活動状況Issue が今どれだけ取り組みやすいかを示します。新しい、活発、古い、ブロック中、またはメンテナー入力待ちなどです。
stale
明確さ期待される変更、受け入れ条件、次の手順がどれだけ明確かを示します。
clear
前提条件
Angular basicsCSS layoutscrollIntoView APIIE 11 testing
初心者向け度初回貢献者にどれだけ取り組みやすいかを 1-100 で推定したスコアです。
50
調査方針
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.
bug(Sidenav): Using scrollIntoView() with multiple sidenavs · angular/components#20447 | Good First Issue