Open
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 having mat-form-field with long label text the text overlap with suffix icon
Reproduction
StackBlitz link: https://stackblitz.com/edit/sktdb4nx-laqmu1py?file=src%2Fexample%2Fform-field-appearance-example.html
Steps to reproduce:
- just put a long text on a mat-form-field with suffix icon
Expected Behavior
no overlap with long text
Actual Behavior
the text overlaps with the icon
Environment
- Angular: 19.2.15
- CDK/Material: 19.2.15
- Browser(s): chrome
- Operating System (e.g. Windows, macOS, Ubuntu): windows
Activity
ThornWalli commentedon May 14, 2025
Hello,
have already experienced the same behavior with Angluar 18.
Stackblitz: https://stackblitz.com/edit/stackblitz-starters-jdfeo5oc?file=src%2Fapp%2Fapp.component.html
[-]bug(COMPONENT): mat-form-field text overlap with suffix icon[/-][+]bug(form-field): mat-form-field text overlap with suffix icon[/+]andrewseguin commentedon May 14, 2025
Besides "no overlap", what behavior are you expecting here? Ellipsis is not ideal since we do not want to hide visual text, especially a label.