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