bug(MatFormField): textarea can be reduce to a smaller height than it's content
- 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
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
Guide de contribution
Ouvrir le guide de contribution
Piste de recherche
Commencez par la reproduction StackBlitz liée dans src/index.html et src/main.ts, puis comparez le comportement avec l’exemple de champ de formulaire de la documentation Material. La correction est terminée lorsqu’un textarea ne peut pas être redimensionné à moins de 24px et que son texte n’est ni tronqué ni déplacé de manière inattendue.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- angular
- Domaine
- frontend
- Type d'issue
- Bug
- Difficulté
- 3/5
- Temps estimé
- 1-2 jours
- Activité
- À l'abandon
- Clarté
- Clairement spécifiée
- Accessibilité débutants
- 45/100