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

[mihaionduma]

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

[crisbeto]

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.

[mihaionduma]

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.

Thank you for your speedy reply.
I've modified the stackblitz to have dir in its html attribute, the bug is still there.

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

[crisbeto]

The example you linked is the same as the original one, but here's something that works: https://stackblitz.com/edit/angular-vwwrbm-dtrw7y

[mihaionduma]

I've managed to reproduce the problem in your example. The problem is that if the [dir] receives only a string and not a expression the initial outline is not rendered correctly.

https://stackblitz.com/edit/angular-vwwrbm-srpxkk

LATER EDIT: The bug also reproduces if you choose to start with rtl in the [dir] expression tag, like so: https://stackblitz.com/edit/angular-vwwrbm-ez6q1q

[crisbeto]

Thank you, now I see it. We have an incorrect calculation that I've fixed in #18867.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}