angular / angular/components

[Tabs] Tab label not fully shown when added past overflow

Offen
#9,178 2 Kommentare 1 Reaktion 0 zugewiesene Personen Auf GitHub ansehen
area: material/tabs P4
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

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

#### What is the expected behavior?
Tab is selected after being added to mat-tab-group and is in full view.

#### What is the current behavior?
Tab is selected and is hidden behind the paginators.

#### What are the steps to reproduce?
https://stackblitz.com/edit/angular-material2-issue-c9hsyv
In the stackblitz above, add tabs until the paginator is shown. The tab will be partial hidden by the paginator.
![material-tab-bug](https://user-images.githubusercontent.com/3068898/34464804-13f95dae-ee5f-11e7-831c-1ef7fd3b3595.PNG)

#### What is the use-case or motivation for changing an existing behavior?
Navigating the user to the tab they just opened.

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Angular: any
Material: 5.0.0
OS: any
TypeScript: 2.4.2
Browsers: any

#### Is there anything else we should know?
A related issue which can also be seen in the stackbliz provided, is that the transform of the bar is not correctly updating when removing tabs. Steps to reproduce: Add 4(or enough tabs to show pagination) tabs (pagination will be shown and last tab will be selected).
Remove the third tab by clicking the X on the label. Pagination is shown until clicking on the label. It then updates and removes the pagination controls since the content can fit.
![beforeclickinglabel](https://user-images.githubusercontent.com/3068898/34464799-11470228-ee5f-11e7-92f6-18643e852a62.PNG)
![afterclickinglabel](https://user-images.githubusercontent.com/3068898/34464798-0f975bb2-ee5f-11e7-84f9-493be75ad855.PNG)

Both issues seem to be related to the animation of the inkbar. (ink-bar.ts line 35) Performing the left calculation in the animation frame plus the delay of the actual animation happens after all the calculations to show/hide the paginator controls.

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Reproduziere die Fälle für Tab-Überlauf und Tab-Entfernung im verlinkten StackBlitz und untersuche anschließend ink-bar.ts um Zeile 35 sowie das Verhalten der Tab-Paginierung. Bestätige, dass ein neu hinzugefügter ausgewählter Tab vollständig sichtbar ist und dass das Entfernen eines Tabs den Paginator ohne zusätzlichen Klick aktualisiert; decke beide Verhaltensweisen mit Regressionstests ab, falls der relevante Test-Einstiegspunkt gefunden wird.

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
35/100

Neue Issues direkt in Ihr Postfach

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