Outlined Mat-Form-Field label alignment issue when using matPrefix inside a dialog.

[Devcon4]

Reproduction

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

Steps to reproduce:

1. Click on the different inputs so that the label transitions.
2. The input Labeled "Broken Input" shows the issue while the other inputs are just for reference.

Expected Behavior

The label should not overlap and take into account matPrefix spacing in dialogs.

Actual Behavior

If you focus the different inputs you will notice that the field labeled Broken Input will overlap the outline border and have extra spacing before the label.

Environment

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

Notes

I noticed that there are several other issues relating to Label alignment on Outlined fields but I found those issues either lacking in substance or not relating to inputs in Dialogs.

[bunnyfly]

I'm seeing this issue as well. See screenshot below. I also tried a plain text prefix instead of an icon and it still breaks.

One thing I noticed: if I "inspect the element" and update the label text in Chrome's Developer Tools, the outline gets dynamically adjusted and displays properly. I haven't dug into the code, but my guess is there's a "recalculate outline border space" method that's being called too soon and needs to be called later after the DOM gets more fully loaded to include the prefix width.

• Angular 8.2.7
• Material 8.2.0
• Chrome
• macOS

[ngRevan]

Same problem here.

• Angular 9.1.0
• Material 9.1.0

[mmalerba]

confirmed this is still an issue, here's an updated stackblitz: https://stackblitz.com/edit/components-issue-zmlg1j?file=app/app.module.ts

[lundmikkel]

Any updates on this issue?

[dhananjaykaushik]

I'm also facing it.
When will this be fixed ??

[mmalerba]

Closing as a dup of #15027

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