bug(cdk/text-field/autosize): incorrect height calculation when parent container adds a scrollbar due to textarea overflow
- Langage dominant
- TypeScript
- Étoiles
- 25k
- Forks
- 6.8k
- Merge moyen
- 1 j 8 h
- PR mergées (30 j)
- 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
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`
Guide de contribution
Ouvrir le guide de contribution
Piste de recherche
Commencez par l’exemple StackBlitz lié dans src/example/text-field-autosize-textarea-example.html et reproduisez le problème en déclenchant la barre de défilement du parent. Suivez ensuite l’implémentation de cdkTextareaAutosize pour comparer les mesures du clone avec la largeur du textarea. Le travail est terminé lorsque le texte reste entièrement visible quand la barre de défilement modifie la largeur disponible dans les versions d’Angular et de CDK indiquées.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- angular, typescript
- Domaine
- frontend
- Type d'issue
- Bug
- Difficulté
- 3/5
- Temps estimé
- 1-2 jours
- Activité
- À l'abandon
- Clarté
- Plutôt claire
- Accessibilité débutants
- 45/100