What’s the bug:
When changing the direction of a matFormField, the outline gap doesn’t render correctly.
Steps to reproduce:
- Build a form with a mat-form-field in it
- Add a mat-label tag with a string inside it
- add a span tag with a prefix attribute
- Change the direction of the mat-form-field to rtl
I was expecting the outline and its label to be rendered correctly, even with the prefix and suffix labels inside the mat-form-field.
When changing the direction of a mat-form-field, the outline gap doesn’t render correctly, there’s a gap where the mat-label should be. Also this is affected by having a prefix inside the mat-form-field, somehow the prefix’s width decrements the outline label left positioning instead of increasing it.
Also the outline itself of the mat-form-file is not rendered correctly.
Also the MatFormField updateOutlineGap() doesn’t update the material correctly, when the direction is rtl. I’m calling updateOutlineGap everytime the direction changes, ltr works ok but rtl is out of place.
- Angular: 9.0.0
- CDK/Material: 9.1.3
- Browser(s): Chrome 80.0.3987.132
- Operating System (e.g. Windows, macOS, Ubuntu): Windows 10