bug(MatSelect): Mdc line ripple doesn't use the color from the theme if it gets disabled right after receiving a value
- Vorherrschende Sprache
- TypeScript
- Sterne
- 25k
- Forks
- 6.8k
- Ø Merge
- 1 T. 8 Std.
- Gemergte PRs (30 T.)
- 91
Beschreibung
### 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
The bottom "line ripple" of a mat-select field doesn't always retrieve its color from the theme variable `--mdc-filled-text-field-disabled-active-indicator-color` when disabled.
See example below :
On this example, the two select inputs are identical and inherit the same styles, the sole difference is that the first input is disabled from the start and the second input is disabled once an option is selected.
If I inspect the line ripple, it seems that once I picked a value and disabled the input the line ripple `:after` selector changes and inherit a color from `--mat-app-text-color` :
If I manually change the color in `:after` to transparent, I get the expect result :
### Reproduction
StackBlitz link: https://stackblitz.com/edit/jnudjj
Steps to reproduce:
1. In theme.scss, after Material theme import, override the value from ` --mdc-filled-text-field-disabled-active-indicator-color`to differentiate it easily
2. Create a component with one mat-select input which gets disabled right after we picked a value :
``
### Expected Behavior
I get an indentical color for the line ripple whether mat-select is disabled from the start or after picking a value.
### Actual Behavior
When a mat-select input gets disabled right after a value is picked, the line ripple color is not correct.
### Environment
- Angular: 17.3.1
- CDK/Material: 17.3.1
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): macOS
Beitragsleitfaden
Rechercherichtung
Beginne mit der StackBlitz-Reproduktion, ihrem theme.scss-Override und der mat-select-Komponente, deren deaktivierter Zustand einem ausgewählten Wert folgt. Vergleiche das Styling des Linien-Ripples, wenn das Select deaktiviert startet, mit dem Styling, nachdem es durch die Auswahl deaktiviert wurde. Als erledigt gilt die Aufgabe, wenn beide Fälle den überschriebenen --mdc-filled-text-field-disabled-active-indicator-color verwenden.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- angular, scss, typescript
- Bereich
- frontend
- Issue-Typ
- Bug
- Schwierigkeit
- 3/5
- Geschätzter Aufwand
- 1-2 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 45/100