Components: Floating label conflicts with outline when appearance is dynamically set

[hblieb]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

floating label doesn't conflict with outline when appearance is dynamically set to 'outline.'

What is the current behavior?

floating label conflicts with outline when a variable is used to set the appearance.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-cvq3kq?file=app/form-field-overview-example.html

What is the use-case or motivation for changing an existing behavior?

Documenting the appearance inputs with a dynamic component, allowing users to switch between different appearance values, is an effective way to communicate the choices and the results.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 6.2, Chrome or Edge, possibly other browsers.

Is there anything else we should know?

[aitboudad]

the same issue appear when changing label dynamically

[maxime1992]

Noticed that behavior too.

When the page loads, if there's an asynchronous value used by a mat-form-field (input, mat-select, ...) then we end up with a view like that:

As soon as you click into one of them, both get their styles right.

Here's a really simple repro: https://stackblitz.com/edit/angular-material2-issue-5bo8d6

[DeanWilliamMills]

Anyone know if this fix is on the live 7.1.1. version? I still get this issue on version 7.1.1.

[angular-automatic-lock-bot[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._}