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

(2 則留言) (0 個反應) (0 位負責人)TypeScript (6,650 個分叉)batch import

P4area: material/sidenavhelp wanted

倉庫指標

星標: (24,044 顆星)
PR 合併指標: (平均合併 3天 12小時) (30 天內合併 98 個 PR)

描述

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
議題類型: 錯誤
難度: 3
預計時間: 半天
活動狀態: 較久未更新
清晰度: 清晰
前置要求: Angular basicsCSS layoutscrollIntoView APIIE 11 testing
新手友善度: 50