angular / angular/components

bug(material/table): Row hover effect is not working since v17.2 (maybe earlier)

Offen
#29,183 0 Kommentare 2 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: material/table P3 regression
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

### Is this a regression?

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

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

Angular 16

### Description

In Angular Material 16, it was possible to have an hover effect on the entire row of tables, as demonstrated in #26203 (as long as we were able to workaround the bug described in #26203).

After a migration to Angular Material 17, the hover effect disappeared. And it is still not back in v18.

The [spec defines row hover](https://m2.material.io/components/data-tables#behavior), and [MDC supports it ](https://github.com/material-components/material-components-web/blob/cfec83c749a1b6b6602c4d2fa474d3e776e7c97b/packages/mdc-data-table/_data-table-theme.scss#L411).

### Reproduction

You might clone the reproduction repository locally via https://github.com/PowerKiKi/mat-table-v17-does-not-highlight-rows-on-mouseover-anymore. It includes branches for v16.1, v17.2, v17.3 and v18.0.

Or else, see the repo directly on StackBlitz:

- [On v16.1](https://stackblitz.com/~/github.com/PowerKiKi/mat-table-v17-does-not-highlight-rows-on-mouseover-anymore/tree/v16.1), mouseover will works.
- [On v17.2](https://stackblitz.com/~/github.com/PowerKiKi/mat-table-v17-does-not-highlight-rows-on-mouseover-anymore/tree/v17.2), mouseover will not work anymore.
- [Even on the latest v18.0](https://stackblitz.com/~/github.com/PowerKiKi/mat-table-v17-does-not-highlight-rows-on-mouseover-anymore/tree/v18.0), mouseover will not work anymore

### Expected Behavior

Row hover effect must be either be enabled by default, like in v16, or if it might break sticky columns as described in #26730, it should be at least enableable via an attribute/config somewhere.

### Actual Behavior

Row hover effect is not happening anymore.

### Environment

- Angular: 16.1 / 17.2
- CDK/Material: 16.1 / 17.2
- Browser(s): Chrome 125
- Operating System (e.g. Windows, macOS, Ubuntu): Ubuntu

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne damit, die Branches v16.1, v17.2, v17.3 und v18.0 im verlinkten Reproduktions-Repository zu vergleichen, und untersuche anschließend die referenzierten MDC-Regeln für das data-table-Theme sowie die zugehörigen Issues #26203 und #26730. Als abgeschlossen gilt die Arbeit, wenn der Zeilen-Hover in der betroffenen Angular Material-Tabelle wieder funktioniert und dabei das in #26730 besprochene Verhalten der Sticky-Spalten erhalten bleibt.

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

Neue Issues direkt in Ihr Postfach

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