angular / angular/components

MatPaginatedTabHeader doesn't scroll last tab fully into view

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

描述

#### Reproduction

Use StackBlitz to reproduce your issue: https://stackblitz.com/edit/components-issue-wsbxpk

Steps to reproduce:
1. Set selectedIndex to last tab
2. Render

#### Expected Behavior
![image](https://user-images.githubusercontent.com/44192365/69958526-4c755880-1505-11ea-9f3f-94b33d5e5541.png)

Selected tab is scrolled fully into view and righthand pagination button disabled just as if the user manually clicked on the last tab

#### Actual Behavior
![image](https://user-images.githubusercontent.com/44192365/69957955-0ff52d00-1504-11ea-8ddb-c6338163bbea.png)

Tab is only partially visible and pagination button remains enabled. When tab titles vary in size only a few pixels of the last tab are visible. Clicking on the last tab manually scrolls it fully into view.

#### Environment

- Angular: 8.2.14
- CDK/Material: 8.2.3
- Browser(s): Chrome, Firefox, Internet Explorer 11, Safari
- Operating System (e.g. Windows, macOS, Ubuntu): All

贡献指南

打开贡献指南

调研方向

从链接的 StackBlitz 复现和 MatPaginatedTabHeader 实现开始,将 selectedIndex 设置为最后一个选项卡。比较初始渲染与手动选择最后一个选项卡时的情况,然后验证所选选项卡是否完全可见,以及右侧分页按钮是否已禁用。

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

评估

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

把新 issue 发到你的邮箱

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