angular / angular/components

bug(MatTable): Nested MatTable's rows have no border if I expand last row of parent MatTable

Ouverte
#28,773 3 commentaires 1 réaction 0 personnes assignées Voir sur GitHub
area: material/table needs: discussion P5
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

### Is this a regression?

- [ ] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

_No response_

### Description

When I have a nested MatTable set with expand feature, when I expand the last row of the parent table, all the cells in the child MatTable will have no border.
![image](https://github.com/angular/components/assets/65027545/dbbc6ed3-0e3b-46e3-ada7-d45e95e29772)

But If I am expanding any other rows except the last row, the nested MatTable is displaying fine.
![image](https://github.com/angular/components/assets/65027545/7575e8d5-770d-4526-94ba-659906241e6e)

I have found the reason that the styles from last row .mat-cell of the parent MatTable is being applied to all the child MatTable's .mat-cell

![image](https://github.com/angular/components/assets/65027545/1831a5c1-ba1a-4783-b86d-34578ce260b6)

### Reproduction

StackBlitz link: https://stackblitz.com/edit/5djdhn?file=src%2Fexample%2Ftable-expandable-rows-example.ts
Steps to reproduce:
1. Expand the 1st row of the MatTable and check row borders
2. Expand the last row of the MatTable and checkl the absence of row borders of the rows

### Expected Behavior

Only the last row of the nested MatTable will be applied with the `border-bottom: none` styles. not all the rows

### Actual Behavior

Every row inside the last row of MatTable's child MatTable is applied with `border-bottom: none` styles.

### Environment

Angular CLI: 17.0.1
Node: 18.19.0
Package Manager: npm 10.2.3
OS: win32 x64

Angular: 17.0.3
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.1700.1
@angular-devkit/build-angular 17.0.1
@angular-devkit/core 17.0.1
@angular-devkit/schematics 17.0.1
@angular/cdk 17.0.1
@angular/cli 17.0.1
@angular/material 17.0.1
@angular/material-luxon-adapter 17.0.1
@schematics/angular 17.0.1
rxjs 7.8.1
typescript 5.2.2
zone.js 0.14.2

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par le point d’entrée StackBlitz situé dans src/example/table-expandable-rows-example.ts et reproduisez le problème en développant d’abord la première ligne, puis la dernière. Examinez comment les lignes MatTable imbriquées reçoivent le style de bordure de la dernière ligne de la table parente. C’est terminé lorsque seule la dernière ligne de la table imbriquée possède border-bottom: none, tandis que les autres lignes enfants conservent leurs bordures.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
frontend
Type d'issue
Bug
Difficulté
3/5
Temps estimé
1-2 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
42/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.