angular / angular/components

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

Aperta
#9,178 2 commenti 1 reazione 0 assegnatari Vedi su GitHub
area: material/tabs P4
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

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

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Riproduci i casi di overflow e rimozione delle schede nello StackBlitz collegato, quindi esamina ink-bar.ts intorno alla riga 35 e il comportamento della paginazione delle schede. Verifica che una scheda selezionata appena aggiunta sia completamente visibile e che la rimozione di una scheda aggiorni il paginatore senza un clic aggiuntivo; copri entrambi i comportamenti con test di regressione se viene trovato il punto di ingresso dei test pertinente.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
angular, typescript
Ambito
frontend
Tipo di issue
Bug
Difficoltà
3/5
Tempo stimato
1-2 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
35/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.