angular / angular/components

perf(cdkTextareaAutosize): Skip height measurements when textarea value is empty

Open
#24,210 0 comments 0 reactions 0 assignees View on GitHub
area: cdk/text-field G P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

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

Calls to _measureScrollHeight, which trigger css layout, are not needed when there's nothing in the text field. In this case, simply set the height to 1 row (height of one line).

See internal CL 421826236 for more context.

### Reproduction

Steps to reproduce:
1. Bootstrap a textarea with cdkTextareaAutosize that has value of '' (empty)

### Expected Behavior

_measureScrollHeight() called only when there's a non-empty value.

### Actual Behavior

_measureScrollHeight() is called regardless of value.

### Environment

- Angular: 13
- CDK/Material: 13
- Browser(s): All
- Operating System (e.g. Windows, macOS, Ubuntu): All

Contributor guide

Open the contributing guide

Research direction

Start at the cdkTextareaAutosize implementation and trace the _measureScrollHeight entry point using a textarea whose value is empty. Confirm that empty values use a one-row height without measurement, while non-empty values retain measurement behavior; add or update the relevant test if the implementation's test location is identified.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend, performance
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.