angular / angular/components

[MatSidenav] Sidenav Toggling Can Cause Content Shifting

未关闭
#12,349 3 条评论 7 个 reaction 已指派 0 人 在 GitHub 查看
area: material/sidenav P3
主要语言
TypeScript
星标
25k
派生
6.8k
平均合并
1 天 8 小时
30 天内合并 PR
91

描述

#### Bug, feature request, or proposal:
Bug

#### What is the expected behavior?
Mat-sidenav-content is not moved from original position upon quick mat-sidenav toggles

#### What is the current behavior?
Quick mat-sidenav toggles can cause mat-sidenav-content to be shifted over until the drawer is toggled again

#### What are the steps to reproduce?

Set the autofocus on mat-sidenav to true, and place a focusable input in the mat-sidenav
Click the 'open drawer' button quickly and repeatedly until the content shifts. Click the button again and the content will shift back.

https://stackblitz.com/edit/angular-eesonu

#### What is the use-case or motivation for changing an existing behavior?
Use-case: User accidentally opens the drawer and quickly presses again to undo the action. This will result in possibly all content on the page not being displayed.

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Angular: 6.0.9
Material: 6.4.1

贡献指南

打开贡献指南

调研方向

首先,在启用 autofocus 且 MatSidenav 内包含可聚焦 input 的情况下,复现链接 StackBlitz 中的行为,然后检查快速切换期间 MatSidenav 和 mat-sidenav-content 的行为。完成的标准是,重复执行打开和关闭操作后,mat-sidenav-content 不再保持偏移状态,并且不需要再次切换即可恢复其位置。

由索引模型根据 Issue 内容生成。

评估

技术栈
angular, typescript
领域
frontend
Issue 类型
缺陷
难度
4/5
预计耗时
3-5 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
45/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。