bug(cdk/text-field/autosize): incorrect height calculation when parent container adds a scrollbar due to textarea overflow
- Lenguaje dominante
- TypeScript
- Estrellas
- 25k
- Forks
- 6.8k
- Merge medio
- 1 d 8 h
- PR fusionados (30 d)
- 91
Descripción
### 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`
Guía de contribución
Línea de trabajo
Comienza con el ejemplo enlazado de StackBlitz en src/example/text-field-autosize-textarea-example.html y reproduce el problema activando la barra de desplazamiento del elemento padre. Después, sigue la implementación de cdkTextareaAutosize para comparar las mediciones del clon con el ancho del textarea. Se considera terminado cuando el texto permanece completamente visible al cambiar la barra de desplazamiento el ancho disponible en las versiones de Angular y CDK indicadas.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- angular, typescript
- Área
- frontend
- Tipo de issue
- Error
- Dificultad
- 3/5
- Tiempo estimado
- 1-2 días
- Estado de actividad
- Estancado
- Claridad
- Bastante claro
- Aptitud para principiantes
- 45/100