bug MatFormFields: Force LTR in RTL page

[Abdulrrahman]

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

The current style behavior for form fields that if there is any RTL direction previous to it, it will be targeted. since the LTR is the default case it wont be an issue to force the component to be RTL, however in RTL page you cant force LTR direction to MatFormFields.

Reproduction

Steps to reproduce:

1. set dir rtl globally in index.html
2. set dir ltr to any form filed https://stackblitz.com/edit/components-issue-2e8dha?file=src/app/example-component.html

Expected Behavior

to be able to change direction of formfield

Actual Behavior

formfield style stays rtl with direction ltr on in

Environment

• Angular: 15
• CDK/Material: 15
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Ubuntu

[mmalerba]

This is a consequence of targeting styles at a selector like [dri="rtl"]. Unfortunately it doesn't work well when embedding parts of the document that use different directions. The best solution is to where possible switch to setting properties like padding-inline-start rather than padding-left so we don't need the [dir] selector. Another option in the future may be the :dir() pseudo-class (but it is currently lacking the browser support we would need)