Mat-form-field outline rendered incorrectly when direction=’rtl’

What’s the bug:

When changing the direction of a matFormField, the outline gap doesn’t render correctly.

Steps to reproduce:

  1. Build a form with a mat-form-field in it
  2. Add a mat-label tag with a string inside it
  3. add a span tag with a prefix attribute
  4. Change the direction of the mat-form-field to rtl

or

See https://stackblitz.com/edit/angular-vwwrbm-8xrx3b

Expected Behavior

I was expecting the outline and its label to be rendered correctly, even with the prefix and suffix labels inside the mat-form-field.

Actual Behavior

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.

Environment

  • 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

1 possible answer(s) on “Mat-form-field outline rendered incorrectly when direction=’rtl’

  1. In general Material components don’t respond to the CSS direction property, because there’s no way for us to detect it. You should use the dir HTML attribute instead.