input placeholder covers value when using OnPush detection strategy

[fxck]

I know there were couple of these before, but it seems to be happening again https://gist.run/?id=d815c9d4e98685976793d074fcc89c23

cc @kara @mmalerba maybe?

[johnqiuwan]

I have the exactly same issue on my project that the placeholder value overlap with the input value.

[abdel-ships-it]

I have the same issue when using reactive forms yForm.controls['xControl'].setValue('foobar')

If I dont change the input using the keyboard, the input just puts the placeholder back to its original position as if the input is empty which its not.

[mmalerba]

There are some similar issues to this one that have already been fixed (#2816, #2837). This one only applies if you are using ChangeDetectionStrategy.OnPush

[ggranum]

I'm seeing this manifest in browser-populated fields - specifically userName and password fields populated by Chrome et. al. My normal temporary hack of

setTimeout(() => { this.changeDetectorRef.markForCheck() }, 100)

fails for this case, however.

Edit: It's a bit more of an edge case than I realised. It only happens if the page is not currently focused - presumably related to the fact that the change listener doesn't fire either, in the same case. To reproduce I have to have the cursor in the address bar and hit enter. The page reloads the label is covering the auto-populated password field. Using keyboard shortcuts to refresh while focused on the console pane causes it also. The placeholder jumps into the correct place as soon as the page body gets focus.

[JacobBrandt]

I'm also seeing this behavior not only for input but on select as well when using OnPush. The select control doesn't have it's value selected until a form control is given focus. Similar to what @realappie shows.

[mjolk]

maybe related to #2663 says it's fixed but i'm still having this issue using select in combination with reactive forms/OnPush change detection.( Angular 4.0.0, material 2.0.0.beta2)

[mjolk]

for me this all works as expected now.(beta 3) Good work!

[eyalewin-zz]

@mjolk , can you share how did was it fixed for you? i still can't have it working.
take a look at this: https://plnkr.co/edit/FncXapgEEdqJU7R3kU8X?p=preview

[FilipeQ]

@mjolk What you do for OnPush work with input placeholder, i have last version (2.0.0-beta.3) and the problem persist.

[ggranum]

Still an issue for me as well. I've worked around it with:

setTimeout(() => {
      changeDetectorRef.markForCheck()
    }, 100)

In ngOnInit / ngAfterViewInit.