MatLabel of an Autofilled MatFormField Does Not Float

[tuhinkarmakar]

Bug, feature request, or proposal: Bug

What is the expected behavior?

The label for an input field will float when "appearance" is set to "standard" and the field gets autofilled.

What is the current behavior?

When "appearance" of MatFormField is set to "standard" and the input field gets autofilled, the MatLabel doesn't float above the input field. Using "legacy" mode doesn't cause this issue.

When using the "legacy" mode

When using the "standard" mode

What are the steps to reproduce?

1. Create a form using MatFormField and MatInput
2. Set "appearance" of MatFormField to "standard"
3. Enter some values in those fields
4. Submit the form
5. Save the input values when the browser prompts
6. Hard reload the page

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

According to Material Design, the label for a filled input field should float above it.

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

I tested with the latest versions of Angular and Angular Material. The TypeScript version was 2.9.2. I tested with Chrome on a Windows 10 machine.

[mmalerba]

It seems to be working fine for me: https://angular-material2-issue-aa46tt.stackblitz.io/ (code here: https://stackblitz.com/edit/angular-material2-issue-aa46tt?file=app/app.component.html).

If you are still experiencing this problem can you post a reproduction? edit: my bad, @josephperrott pointed out that I forgot to put appearance="standard" in my example

[tuhinkarmakar]

You need to set "appearance" of the MatFormFields to "standard". I forked your code and made the changes. Take a look here.

[mmalerba]

Oh this is related to the missing keyframes thing it looks like. Here's your example but with the keyframes added in manually: https://angular-material2-issue-mmpq8b.stackblitz.io/ #12567 will fix this as well

[tuhinkarmakar]

Yes, you're right. When I added the @keyframes manually the issue disappeared.

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