bug(cdk/text-field): cdkTextareaAutosize caches line height before matInput applies `font: inherit`, so min/max rows are wrong

未关闭
  • 哪里不对？
#33,944 5 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

维护者通常 1 天内回复

还没有人认领这个 Issue。

评估

难度
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 内容生成。

描述

area: cdk/text-field P4
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):

  • CdkTextareaAutosize measures and caches the line height on the first ngDoCheck (resizeToFitContent → _cacheTextareaLineHeight, cloning the textarea with rows=1).
  • MatInput applies font: inherit via the class mat-mdc-form-field-input-control, which is a dynamic host binding ('[class.mat-mdc-form-field-input-control]': '_isInFormField').
  • Host bindings are applied after ngDoCheck in 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 resize clears 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:

  1. Open the page above (fresh load, don't resize the window).
  2. 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"
  3. Type more than 3 lines: the textarea starts scrolling after ~3 lines instead of 5.
  4. 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 模板
  • 阅读贡献指南

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

angular/components 的其他 Issue

查看 angular/components 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

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