bug(form-field): notch width is out of sync with custom label content during layout changes
维护者通常 1 天内回复
还没有人认领这个 Issue。
评估
- 难度
- 3/5
- 预计耗时
- 1-2 天
- 新手友好度
- 52/100
- Issue 类型
- 缺陷
- 描述清晰度
- 基本清楚
- 活跃度
- 冷清
- 技术栈
- angular, typescript
- 领域
- frontend
调研方向
从 src/main.ts 中提供的 StackBlitz 复现开始，检查调整容器大小时 mat-form-field 轮廓的行为。比较布局变化期间浮动 mat-label 的内容与缺口。完成标准是缺口同步跟随标签宽度，且没有明显的滑动、偏移或重叠。
由索引模型根据 Issue 内容生成。
描述
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 MDC-based mat-form-field (outline appearance) fails to synchronously update the notch (gap) width when the content inside mat-label changes its layout or when the container is resized. This is especially evident when using custom components with Flexbox inside the label (e.g., for adding help icons or tooltips).
Reproduction
StackBlitz link: https://stackblitz.com/edit/components-issue-starter-gnupffhv?file=src%2Fmain.ts
Steps to reproduce:
- Create a
mat-form-fieldwithappearance="outline"andfloatLabel="always". - Apply
display: flexto themat-label(or a container immediately inside it). - Place a text string and an icon (e.g.,
mat-icon) inside that flex container. - Dynamically change the width of the form field's container (e.g., by resizing the browser window or using a slider in the provided reproduction).
- Observe the behavior of the label content and the notch gap.
Expected Behavior
The notch gap should resize synchronously with the label content to prevent any "sliding" or "drifting" effect. The gap in the outline should always match the actual width of the floating label in real-time during container resizing or layout shifts, ensuring that the border never overlaps the label's text or icons.
Actual Behavior
There is a significant visual lag in the label's positioning and scaling. While the browser's layout engine expands the container instantly, the label's text content moves and resizes with a delay.
In this implementation, we intentionally prioritize the visibility of the tooltip/icon over the label text.. This ensures that the help trigger is always accessible to the user, even on small screens
Lag Animation: https://github.com/user-attachments/assets/a3e9ff59-8586-449b-95d1-d5d0b3e0f727
Environment
- Angular: 21.2.10
- CDK/Material: 21.2.8
- Browser(s): Chrome 147.0.7727.138
- Operating System (e.g. Windows, macOS, Ubuntu): Windows
- 主要语言
- TypeScript
- 星标
- 25k
- 派生
- 6.8k
- 平均合并
- 1 天 7 小时
- 30 天内合并 PR
- 92
环境准备
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
angular/components 的其他 Issue
-
area: material/datepicker P4
难度 2/5 1-3 小时 新手友好度 72/100
angular/components#33763 · 2 条评论 · 3 个 reaction ·
维护者通常 1 天内回复
-
area: material/table P4
难度 1/5 1 小时以内 新手友好度 88/100
angular/components#33709 · 1 条评论 ·
维护者通常 1 天内回复
-
area: material/table docs gemini-triaged P4
难度 2/5 1-3 小时 新手友好度 72/100
angular/components#33455 ·
维护者通常 1 天内回复
-
area: material/core gemini-triaged P3
难度 1/5 1 小时以内 新手友好度 78/100
angular/components#33059 · 2 条评论 ·
维护者通常 1 天内回复
-
area: material/dialog P2
难度 2/5 1-3 小时 新手友好度 64/100
angular/components#30536 · 3 个 reaction ·
维护者通常 1 天内回复
查看 angular/components 的全部 Issue
相似的 Issue
-
module-request
难度 2/5 1-3 小时 新手友好度 68/100
维护者通常 1 天内回复
-
难度 1/5 1 小时以内 新手友好度 90/100
appandflow/stim#1604 · 1 条评论 ·
维护者通常 1 天内回复
-
community first-timers-only good first issue hacktoberfest help wanted low hanging fruit up-for-grabs
难度 1/5 1 小时以内 新手友好度 92/100
lingdojo/kana-dojo#31060 · 1 条评论 · 5 个 reaction ·
维护者通常 1 天内回复
-
难度 1/5 1 小时以内 新手友好度 90/100
paperclipai/paperclip#14173 ·
维护者通常 1 天内回复
-
needs-triage
难度 2/5 1-3 小时 新手友好度 85/100
维护者通常 1 天内回复