angular / angular/components

bug(cdk/text-field/autosize): Scrollbar appears when line-height is a decimal and autosizing is enabled

Aperta
#32,178 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub
area: cdk/scrolling area: cdk/text-field P3
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

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

When using a `` with `cdkTextareaAutosize` and a **decimal numeric** `line-height` **value** (for example `1.15`), a vertical scrollbar appears even when the content fits perfectly within the view.
This happens despite autosizing being enabled, and the field should automatically expand to fit content without a scrollbar.

This issue does not occur when `line-height` **is an integer** (e.g. `1 or 2`).

**Technical Observation**
The browser appears to truncates decimal values internally (e.g. from `16.08 px` to `16 px`) when returning the clone's height to Angular.
As a result, when the text area expands to its autosized height (e.g. `4 lines`), the truncation introduces a small pixel mismatch, just enough to trigger a scrollbar.

**Possible solution:**
Angular CDK might need to account for fractional pixel rounding when computing `textarea` height.

### Reproduction

StackBlitz link: **https://stackblitz.com/edit/5xmbl7sj-53y6s3u8?file=src%2Fexample%2Ftext-field-autosize-textarea-example.html**
Steps to reproduce:
1. Open the StackBlitz link above
2. Set the browser zoom to `110%` **(important)**
3. Observe the `<textarea>` component with `cdkTextareaAutosize`
4. Notice the CSS rule applied
```css
textarea { line-height: 1.15 }
```
5. Fill in three lines of text, e.g. using
```
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
```
6. Add one more character (`a`),
-> A scroll bar appears even though the text area expands correctly

### Expected Behavior

The `textarea` should **never display a scrollbar** when autosizing is enabled, regardless of `line-height` precision.

It should fully expand to fit content, even when `line-height` includes decimal or sub-pixel values.

<img width="225" height="103" alt="Image" src="https://github.com/user-attachments/assets/ab6a2276-c076-40d0-a1a9-b19570e8edaf" />

### Actual Behavior

A vertical scrollbar appears after the text fills exactly three lines and one additional character is entered.

The scrollbar is triggered despite autosizing correctly adjusting the height.

<img width="225" height="103" alt="Image" src="https://github.com/user-attachments/assets/1d84ea7a-2b80-4232-be47-2b75b5bf8bf7" />

### Environment

- Angular: `20.2.4`
- CDK/Material: `20.2.2`
- Browser(s): `Edge (141.0.3537.85), Chrome (141.0.7390.108)` possibly more (tested on these)
- Operating System (e.g. Windows, macOS, Ubuntu): `Windows`

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia con la riproduzione su StackBlitz, in particolare con src/example/text-field-autosize-textarea-example.html, e riproduci il problema con lo zoom del browser al 110% usando cdkTextareaAutosize e line-height: 1.15. Traccia il comportamento di ridimensionamento automatico del textarea di Angular CDK e verifica che un textarea di quattro righe con line-height frazionaria non mostri una barra di scorrimento dopo l'inserimento del carattere aggiuntivo.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
angular, typescript
Ambito
frontend
Tipo di issue
Bug
Difficoltà
3/5
Tempo stimato
1-2 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
45/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.