bug(mat-form-field): label is not within the border gap for outline appearance

[sbrunecker]

Reproduction

https://stackblitz.com/edit/components-issue-jbhqbn

Modify the initial value of countryCode in src/app/example-component.ts to see that the gap is moving based on the initial prefix length (e.g. "" and "+12345").

Now changing the country to USA:

Expected Behavior

When the input is focused, the label and the gap in the outline are properly aligned in the upper left corner.

Actual Behavior

The gap is placed based on the initial prefix while the label is placed based on the current prefix so if the initial prefix length is not the same as the current prefix length, the label will appear misaligned.

Environment

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

[crisbeto]

I've pushed #23869 which will fix this. Until the fix is released, you can also resolve it on your end by calling updateOutlineGap on the form field when the prefix changes.

[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.}