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