bug(cdk/text-field/autosize): incorrect height calculation when parent container adds a scrollbar due to textarea overflow
- 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 a `` with `cdkTextareaAutosize` has its **width set to** `auto` and sits flush against the edges of its parent container, `autosize` miscalculates its height **when the parent container acquires a vertical scrollbar** (typically when overflow-y: auto or scroll is set).
As soon as the parent container shows a vertical scrollbar - slightly reducing the effective available width - the autosize clone measures text wrapping differently, causing the textarea to underestimate the required number of rows. This results in **clipped and partially hidden text**.
### Reproduction
StackBlitz link: **https://stackblitz.com/edit/5xmbl7sj-bxb7txwe?file=src%2Fexample%2Ftext-field-autosize-textarea-example.html**
Steps to reproduce:
1. Open the StackBlitz Link above
2. Observe the `<div>` container with `overflow-y: auto` and the `<textarea>` component using `cdkTextareaAutosize`
3. Resize the viewport so the container becomes narrow enough to easily trigger a scrollbar
4. Insert text until the text area is filled and looks something like this, such that the scrollbar is triggered
<img width="309" height="249" alt="Image" src="https://github.com/user-attachments/assets/bd4bd212-e4e0-40b2-98bb-1ff800d20b33" />
5. Insert another letter like `a`, note how it disappears
6. Use the cursor to navigate to the bottom of the text and note how the top of the text in the `textarea` is clipping.
### Expected Behavior
`cdkTextareaAutosize` should correctly measure the content height **even when the parent container introduces a scrollbar** that slightly changes the available width. The textarea should always fully display its content without clipping or requiring manual resizing.
### Actual Behavior
When the container’s scrollbar appears, the autosize clone measures text wrapping as if no scrollbar were present. This results in a mismatch between measured and actual layout width, underestimating the required height by roughly one line. The resulting height is underestimated by roughly one line, leading to visible clipping.
<img width="304" height="292" alt="Image" src="https://github.com/user-attachments/assets/70026306-40ba-4766-83ad-9cfc3c6fb5e5" />
### 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 l’esempio StackBlitz collegato in src/example/text-field-autosize-textarea-example.html e riproduci il problema attivando la barra di scorrimento dell’elemento padre. Poi segui l’implementazione di cdkTextareaAutosize per confrontare le misurazioni del clone con la larghezza del textarea. Il lavoro è completo quando il testo rimane completamente visibile, anche quando la barra di scorrimento modifica la larghezza disponibile nelle versioni di Angular e CDK indicate.
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