angular / angular/components

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

Abierto
#9,178 2 comentarios 1 reacción 0 asignados Ver en GitHub
area: material/tabs P4
Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 8 h
PR fusionados (30 d)
91

Descripción

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

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Reproduce los casos de desbordamiento y eliminación de pestañas en el StackBlitz enlazado y, a continuación, inspecciona ink-bar.ts alrededor de la línea 35 y el comportamiento de paginación de pestañas. Confirma que una pestaña seleccionada recién añadida sea completamente visible y que eliminar una pestaña actualice el paginador sin un clic adicional; cubre ambos comportamientos con pruebas de regresión si se encuentra el punto de entrada de pruebas pertinente.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
angular, typescript
Área
frontend
Tipo de issue
Error
Dificultad
3/5
Tiempo estimado
1-2 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
35/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.