angular / angular/components

MatPaginatedTabHeader doesn't scroll last tab fully into view

オープン
#17,853 コメント 6 件 リアクション 3 件 担当者 0 名 GitHub で見る
area: material/tabs P3
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
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 を短くまとめたダイジェスト。