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

オープン
#28,850 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る
area: material/select P4
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
91

説明

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

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

StackBlitz の再現、そこにある theme.scss のオーバーライド、および選択された値に応じて disabled 状態になる mat-select コンポーネントから始めてください。select が disabled の状態で開始された場合のラインリップルのスタイルと、選択によって disabled になった後のスタイルを比較してください。両方のケースでオーバーライドされた --mdc-filled-text-field-disabled-active-indicator-color が使用されれば完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
angular, scss, typescript
領域
frontend
issue の種類
バグ
難易度
3/5
見積もり時間
1〜2日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
45/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。