bug(cdk/text-field): cdkTextareaAutosize caches line height before matInput applies `font: inherit`, so min/max rows are wrong
維護者通常 1 天內回覆
評估
- 難度
- 4/5
- 預估耗時
- 3-5 天
- 新手友好度
- 57/100
- Issue 類型
- 缺陷
- 描述清晰度
- 描述清楚
- 活躍度
- 活躍
- 技術堆疊
- angular, typescript
- 領域
- frontend
研究方向
Start with CdkTextareaAutosize and its first ngDoCheck measurement path (resizeToFitContent and _cacheTextareaLineHeight), then compare it with the MatInput host binding that applies mat-mdc-form-field-input-control. Reproduce the issue in the official CDK text-field autosizing example and inspect the cached line height before and after resizing. Done means min/max heights use the textarea's actual line height on first render, without a window resize.
由索引模型根據 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
14.x (verified on v14.material.angular.dev, Angular 14.0.0)
Description
When cdkTextareaAutosize is used on a matInput textarea inside mat-form-field, the cached line height used for cdkAutosizeMinRows / cdkAutosizeMaxRows is measured with the browser's default textarea font instead of the form field's font. As a result, min-height / max-height are too small until the window is resized.
Cause (as far as I can tell):
CdkTextareaAutosizemeasures and caches the line height on the firstngDoCheck(resizeToFitContent→_cacheTextareaLineHeight, cloning the textarea withrows=1).MatInputappliesfont: inheritvia the classmat-mdc-form-field-input-control, which is a dynamic host binding ('[class.mat-mdc-form-field-input-control]': '_isInFormField').- Host bindings are applied after
ngDoCheckin the first change detection pass. So at measuring time the textarea (and its clone) still uses the UA default textarea font (Chrome: monospace 13.33px,line-height: normal≈ 15px). - The wrong value stays cached until a window
resizeclears it.
Measured on the official docs example (cdkAutosizeMaxRows="5", actual line height 24px):
| Docs | Angular | measured line height | max-height |
|---|---|---|---|
| v14 | 14.0.0 | 18px (correct) | 90px |
| v15 | 15.1.1 | 15px | 75px |
| v17 | 17.3.0 | 15px | 75px |
| v19 | 19.2.6 | 15px | 75px |
| v21 | 21.2.11 | 15px | 75px |
| current | 22.2.1 | 15px | 75px (expected 120px) |
It started with v15, i.e. the switch to the MDC-based form field.
Workaround: a global style so the textarea inherits the font before the first measurement:
textarea.cdk-textarea-autosize { font: inherit; letter-spacing: inherit; }
Reproduction
No StackBlitz needed – the official docs example reproduces it:
https://material.angular.dev/cdk/text-field/examples ("Auto-resizing textarea")
Steps to reproduce:
- Open the page above (fresh load, don't resize the window).
- Select the textarea in DevTools and run:
→({ minHeight: $0.style.minHeight, maxHeight: $0.style.maxHeight, lineHeight: getComputedStyle($0).lineHeight })minHeight: "15px",maxHeight: "75px",lineHeight: "24px" - Type more than 3 lines: the textarea starts scrolling after ~3 lines instead of 5.
- Resize the browser window and run the snippet again →
minHeight: "24px",maxHeight: "120px"(correct).
For comparison, the same example on https://v14.material.angular.dev/cdk/text-field/examples measures correctly on first load.
Expected Behavior
min-height / max-height are based on the actual line height of the textarea (24px → max-height: 120px for 5 rows) right after the first render.
Actual Behavior
They are based on the UA default textarea font (15px → max-height: 75px) until the window is resized.
Environment
- Angular 22.2.1
- CDK/Material 22.2.x
- Chrome (Version 154.0.8037.95 (64-Bit))
- Windows 11
- 主要語言
- TypeScript
- 星號
- 25k
- 分支
- 6.9k
- 平均合併
- 2 天 7 小時
- 30 天內合併 PR
- 83
環境準備
- 沒有 Dockerfile 或 Docker Compose 檔案
- 沒有 Pull Request 範本
- 閱讀貢獻指南
從這裡開始
- 先讀完整個 Issue，再讀專案的貢獻指南。
- 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
- Fork 儲存庫，在一個分支上完成修改。
- 送出 Pull Request，並在描述裡引用這個 Issue 編號。
angular/components 的其他 Issue
-
bug(mat-slider): on Firefox, slider thumb is not aligned with cursor可能已有人在做 @Devyalamaddi 於 4 天前認領。 未關閉area: material/slider P4
難度 2/5 1-3 小時 新手友好度 62/100
angular/components#34094 · 1 則留言 ·
維護者通常 1 天內回覆
-
bug(material/sort): hover hint arrow on an unsorted header shows the active sort direction, not the resulting direction after click.可能已有人在做 @abdul-karim-mia 於 2 天前認領。 未關閉area: material/sort P3
難度 2/5 1-3 小時 新手友好度 70/100
angular/components#33933 ·
維護者通常 1 天內回覆
-
bug(mat-date-picker): month shown twice in date picker可能已有人在做 @PreethiPantangi 於 54 天前認領。 未關閉area: material/datepicker P4
難度 2/5 1-3 小時 新手友好度 72/100
angular/components#33763 · 2 則留言 · 3 個 reaction ·
維護者通常 1 天內回覆
-
Bug in table.scss footer cell height: unset instead of footer row height unset可能已有人在做 @minwookshin 於 41 天前認領。 未關閉area: material/table P4
難度 1/5 1 小時以內 新手友好度 88/100
angular/components#33709 · 1 則留言 ·
維護者通常 1 天內回覆
-
bug(date-adapter): Misleading JSDoc for createDate returns type可能已有人在做 @BHUVANSH855 於 171 天前認領。 未關閉area: material/core P3
難度 1/5 1 小時以內 新手友好度 78/100
angular/components#33059 · 2 則留言 ·
維護者通常 1 天內回覆
查看 angular/components 的全部 Issue
相似的 Issue
-
難度 2/5 1-3 小時 新手友好度 78/100
vercel-labs/ui#540 ·
維護者通常 1 天內回覆
-
accepted ai-dev ai-implementing
難度 2/5 1-3 小時 新手友好度 74/100
維護者通常 1 天內回覆
-
normalizePropName strips `#` characters from Figma property names instead of only the `#id` suffix未關閉
難度 2/5 1-3 小時 新手友好度 72/100
figma/code-connect#419 ·
-
難度 2/5 1-3 小時 新手友好度 78/100
-
Negative values skip k/M abbreviation and medium decimal format on line, stacked-area, and tooltip未關閉
難度 2/5 1-3 小時 新手友好度 84/100
britecharts/britecharts#1255 ·
維護者通常 1 天內回覆