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.

[eyalewin-zz]

@ggranum solution worked out for me, just that I've put it in the subscribe where the actual data is rendered.
but still, I would have expected that this issue has been solved.

[mjolk]

i use markForCheck() as well, not specifically for this reason , but it apparently was the reason it worked( before in the exact same setup it didn't). It is logical( to me in my use case) the render does not happen without marking the component dirty( in a situation where there is new data from a subscription) manually so i did not think it was a bug/it was fixed

[radoslavpetranov]

I came to report the same issue - glad I searched before creating a new one. Here's my plunker for good measure

https://plnkr.co/edit/laqgCj3vQI8PPbnXc4en?p=preview

[YeomansIII]

Still seeing this issue: #4814

[taokakao]

I am still facing issue even with timeout hack. Is there anything else can be done to fix? (OnPush + ngModel)

[MaickelHubner]

This problem back in beta.10.
Can anybody solve it?

[willshowell]

@MaickelHubner can you reproduce it and open a new issue?

[jososaga]

This problem is back in beta 12, any solution?

[MaxTheMax2007]

Would be great to have a solution because as it is now its not possible to use fields(( ... It was working fine in beta 11 ..

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