angular / angular/components

MatPaginatedTabHeader doesn't scroll last tab fully into view

Offen
#17,853 6 Kommentare 3 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: material/tabs P3
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

#### 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

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne mit der verlinkten StackBlitz-Reproduktion und der Implementierung von MatPaginatedTabHeader, wobei selectedIndex auf den letzten Tab gesetzt wird. Vergleiche die anfängliche Darstellung mit der manuellen Auswahl des letzten Tabs und überprüfe anschließend, dass der ausgewählte Tab vollständig sichtbar und die rechte Paginierungsschaltfläche deaktiviert ist.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
frontend
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
45/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.