Incorrect initial placeholder position after update to beta.10

[MaickelHubner]

Bug, feature request, or proposal:

When init the component the placeholder is being shown over the content. After the focus it returns to normal

What is the expected behavior?

Placeholder showed in normal position since init

What is the current behavior?

What are the steps to reproduce?

Providing a Plunker (or similar) is the best way to get the team to see your issue.
Plunker template: https://goo.gl/DlHd6U

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

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

Angular4, Material 2.0.0-beta.10, browser Safari

Is there anything else we should know?

[MaickelHubner]

I create a plunker, but there it works :-(

http://plnkr.co/edit/X7ZSaGW7t8nFx3KHQ09K?p=preview

[mmalerba]

#5692 changed input to use OnPush change detection. It sounds like this may be related to that. Is the data shown in the inputs loaded asynchronously?

[MaickelHubner]

Does not work too!!!
If I remove the option [formControl]="inputControl" of the input in HTML or if I remove the ? of the [value]="inputValue?.descricao" it worked well (but I receive the TypeError: undefined is not an object (evaluating '_co.inputValue.descricao') error).

[MaickelHubner]

I also realized that the change in conta.descricao do not appear in ngOnChanges, only in writeValue

[timwright35]

@mmalerba I am having this issue as well and the data is patched/set after it is received from the server, the form is setup with blank values at first. But even after being added to the form, it is showing up in the inputs, the placeholder does not move till you click into the input.

[willshowell]

@Tempus35 can you reproduce either?

Here's a starter template: http://plnkr.co/edit/jZoIp0f9R4Krrm33w8VR?p=preview

[timwright35]

@willshowell http://plnkr.co/edit/hTVZbkIUChw6SgTWDRFC?p=preview it appears to be when you do what I am doing in the plunker with making a new control or in the case of the component in the code I am working on, a form group.

[mmalerba]

Yep, this is due to OnPush change detection. Using patchValue instead of creating a new FormControl works: http://plnkr.co/edit/TmlV6lRpNRGRFYrpM9S5?p=preview

@crisbeto is there a way for us to detect if they give us a completely new FormControl and run change detection?

[timwright35]

@mmalerba Another place this is an issue is on login forms, where the input might be filled in via a password manager. When the password manager fills in the inputs the placeholder is not moving up as it once did.

[crisbeto]

@mmalerba it should be possible to define our own formControl input and react to changes based on it.

[MaickelHubner]

To fix the problem I simply used the setValue function of the formControl inside the set method:

set inputValue(val) { this._inputValue = val; this.propagateChange(this._inputValue); if (val) { this.inputControl.setValue(val.descricao); } }

[mmalerba]

@crisbeto That works for formControl since it goes on the input, but what if we had a formGroup on some parent element?

[crisbeto]

Not without defining our own directive that looks for [formGroup] @mmalerba.

[mmalerba]

Ok, so I see a couple ways we could deal with this:

1. Tell people not to do this
2. Tell people not to do this, but provide a runChangeDetection method for them to call if they must
3. Create a directive that matches formControl formGroup formArray any others? Inject that and use it to run change detection appropriately
4. Go back to ChangeDetectionStrategy.Default

@jelbourn @crisbeto

[jelbourn]

@kara do you have any input on this?

[zoechi]

I'm still seeing this with OnPush and emitEvent: false. Shouldn't emitModelToViewChange:true be enough?

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