angular / angular/components

bug(MatFormField): textarea can be reduce to a smaller height than it's content

Abierto
#30,089 1 comentario 0 reacciones 0 asignados Ver en GitHub
area: material/form-field P4
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

A `textarea` within a `mat-form-field` can be resized using the mouse. If its height is reduced to less than the height of a single line of text, a vertical scrollbar will appear, and the text within the `textarea` will become truncated. This occurs while the parent `mat-form-field` maintains a minimum height of 56px.

### Reproduction

StackBlitz link: https://stackblitz.com/edit/components-issue-starter-wybpxw?file=src%2Findex.html,src%2Fmain.ts
Steps to reproduce:
1. using the mouse, reduce the `textarea` height below 24pixels => a vertical scrollbar appears

This bug can also be reproduced on Material's documentation: https://material.angular.io/components/form-field/overview#form-field-overview

### Expected Behavior

It should not be possible to reduce a `textarea` height below 24px, which represents a single line of text.

### Actual Behavior

When a `textarea` height is reduced below 24px, a vertical scrollbar appears even though the parent `mat-form-field` keeps a minimal height of 56px.

I also noticed that when the `textarea` height is reduced from 28px to 27px, the text within the `textarea` is moved up by 1px. The same behavior can be observed down to 24px. I couldn't understand why this occurs and I'm not sure it is related to the height problem described above.

### Environment

- Angular: 18.2.8
- CDK/Material: 18.2.8 (but could be reproduced on all versions of the Material documentation)
- Browser(s): Edge 131.0.2903.51 / Chrome 130.0.6723.116
- Operating System (e.g. Windows, macOS, Ubuntu): Windows / Ubuntu

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Comienza con la reproducción vinculada de StackBlitz en src/index.html y src/main.ts y, después, compara el comportamiento con el ejemplo de campo de formulario de la documentación de Material. La corrección estará terminada cuando un textarea no pueda redimensionarse por debajo de 24px y su texto no se trunque ni se mueva inesperadamente.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
angular
Área
frontend
Tipo de issue
Error
Dificultad
3/5
Tiempo estimado
1-2 días
Estado de actividad
Estancado
Claridad
Bien especificado
Aptitud para principiantes
45/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.