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 个 reaction 已指派 0 人 在 GitHub 查看
area: material/select P4
主要语言
TypeScript
星标
25k
派生
6.8k
平均合并
1 天 8 小时
30 天内合并 PR
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 覆盖以及禁用状态跟随选定值的 mat-select 组件开始。比较 select 初始处于禁用状态时的线条 ripple 样式与选择后使其禁用时的样式。完成标准是两种情况都使用覆盖后的 --mdc-filled-text-field-disabled-active-indicator-color。

由索引模型根据 Issue 内容生成。

评估

技术栈
angular, scss, typescript
领域
frontend
Issue 类型
缺陷
难度
3/5
预计耗时
1-2 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
45/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。