angular / angular/components

bug(MatSelect): Mdc line ripple doesn't use the color from the theme if it gets disabled right after receiving a value

Aperta
#28,850 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub
area: material/select P4
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

### 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 :
Screenshot 2024-04-10 at 10 46 25

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` :
Screenshot 2024-04-10 at 10 40 58

If I manually change the color in `:after` to transparent, I get the expect result :
Screenshot 2024-04-10 at 10 41 15

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

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia con la riproduzione StackBlitz, il relativo override di theme.scss e il componente mat-select il cui stato disabilitato segue un valore selezionato. Confronta lo stile del ripple della linea quando il select è inizialmente disabilitato con lo stile dopo che la selezione lo disabilita. Il lavoro è completato quando entrambi i casi usano il --mdc-filled-text-field-disabled-active-indicator-color sovrascritto.

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

Valutazione

Stack tecnologico
angular, scss, 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
45/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.