Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

MdInput - Placeholder does not float when using formControl setValue() #2441

Closed
brunopereira27 opened this issue Dec 28, 2016 · 6 comments · Fixed by #2455
Closed

MdInput - Placeholder does not float when using formControl setValue() #2441

brunopereira27 opened this issue Dec 28, 2016 · 6 comments · Fixed by #2455
Assignees
@crisbeto

Comments

@brunopereira27
Copy link

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Placeholder should be floating over input when setting the input value using setValue of its formControl.

What is the current behavior?

When I use setValue, the input contains the value set and the placeholder overlays the value, without floating over it. If I enter a text manually just after using setValue, the placeholder goes to the right place.

What are the steps to reproduce?

Here's a plunker that reproduces the issue:
http://plnkr.co/edit/huUsxFmbFKSZuCG92EmQ?p=preview

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

Angular: 2.3.1
material: git+https://github.com/angular/material2-builds.git but also tested on 2.0.0-beta1
Browser: Chromium 55.0.2883.87
Os: Chromium 55.0.2883.87
@crisbeto crisbeto self-assigned this Dec 28, 2016
crisbeto added a commit to crisbeto/material2 that referenced this issue Dec 28, 2016
@crisbeto
fix(input): not floating the label when updating the value programmat…
72bc742 
…ically with reactive forms

Fixes the input placeholder not being floating when the value is updated programmatically via `FormControl.setValue`. This was because the listener that handles the value changes gets initialized before the `FormControl`.

Fixes angular#2441.
crisbeto added a commit to crisbeto/material2 that referenced this issue Dec 28, 2016
@crisbeto
fix(input): not floating the label when updating the value programmat…
0c381fb 
…ically with reactive forms

Fixes the input placeholder not being floating when the value is updated programmatically via `FormControl.setValue`. This was because the listener that handles the value changes gets initialized before the `FormControl`.

Fixes angular#2441.
@crisbeto crisbeto mentioned this issue Dec 28, 2016
Closed
@petebacondarwin
Copy link
Member

Ha! I just came across this bug too!

@petebacondarwin
Copy link
Member

In the meantime, if you are only experiencing this because the initial setting of the values is async then you could provide "dummy values" to the form controls when you create them, so that the input directive thinks that they are not empty before the setValue finally fills them.

devversion pushed a commit to devversion/material2 that referenced this issue Dec 29, 2016
@crisbeto @devversion
fix(input): not floating the label when updating the value programmat…
ef4c6bf 
…ically with reactive forms

Fixes the input placeholder not being floating when the value is updated programmatically via `FormControl.setValue`. This was because the listener that handles the value changes gets initialized before the `FormControl`.

Fixes angular#2441.
devversion added a commit to devversion/material2 that referenced this issue Dec 29, 2016
@devversion
fix(input): properly determine input value
6e0f9b2 
Right now the MdInputDirective tries to cache the `value` of the input.

> For this the MdInputDirective needs to listen for NgControl value :changes and for native `(change)` events.

This caching will be problematic when a value is set directly to the input element (using `[value]` property binding) because Angular is only able to recognize this change in the first ChangeDetection.

> The solution of updating the value in the `ngAfterViewInit` lifecycle hook, will result in a binding change (`[class.md-empty]` in the view) while being in a ChangeDetection, which leads to a ChangeDetection error.

Fixes angular#2441. Fixes angular#2363
devversion added a commit to devversion/material2 that referenced this issue Dec 29, 2016
@devversion
fix(input): properly determine input value
e8d558d 
Right now the `MdInputDirective` tries to cache the `value` of the input.

To do this, the `MdInputDirective` needs to listen for `NgControl` value changes and for native `(change)` events.

This will be problematic when a value is set directly to the input element (using `[value]` property binding) because Angular is only able to recognize this change in the first ChangeDetection.

```html
<md-input-container>
  <input md-input [value]="myValue" placeholder="Label">
</md-input-container>
```

The approach of updating the value in the `ngAfterViewInit` lifecycle hook, will result in a binding change while being in a ChangeDetection, which leads to a ChangeDetection error.

```
Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'.
```

Fixes angular#2441. Fixes angular#2363
@devversion devversion mentioned this issue Dec 29, 2016
Merged
@0x-r4bbit 0x-r4bbit mentioned this issue Dec 30, 2016
Closed
@devversion devversion mentioned this issue Jan 1, 2017
Closed
devversion added a commit to devversion/material2 that referenced this issue Jan 4, 2017
@devversion
fix(input): properly determine input value
02e5cea 
Right now the `MdInputDirective` tries to cache the `value` of the input.

To do this, the `MdInputDirective` needs to listen for `NgControl` value changes and for native `(change)` events.

This will be problematic when a value is set directly to the input element (using `[value]` property binding) because Angular is only able to recognize this change in the first ChangeDetection.

```html
<md-input-container>
  <input md-input [value]="myValue" placeholder="Label">
</md-input-container>
```

The approach of updating the value in the `ngAfterViewInit` lifecycle hook, will result in a binding change while being in a ChangeDetection, which leads to a ChangeDetection error.

```
Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'.
```

Fixes angular#2441. Fixes angular#2363
@kara kara closed this as completed in #2455 Jan 4, 2017
kara pushed a commit that referenced this issue Jan 4, 2017
@devversion @kara
fix(input): properly determine input value (#2455)
3a11927 
Fixes #2441. Fixes #2363
@maxime1992
Copy link

@brunopereira27 is your plunkr working ? Because I was trying to see your issue but I have that :
image

So I don't see any problem.

I'm having (probably) the same problem :
image

But as your Plunkr seems to be working I'm not sure.

I'm using reactive form and patchValue tho.

@mariohmol
Copy link

mariohmol commented Aug 30, 2017 •
edited
Loading

Hi .. this still an issue in beta.10.. shouldnt be open?

Thanks @petebacondarwin , the workaround works! I used just a space in the string and now it loads with the initial value and correct placeholder

city: [' ', [<any>Validators.required, <any>Validators.minLength(5)]],

#2613 (comment)

@maxime1992
Copy link

Should definitely be reopen ;)

@mohitook mohitook mentioned this issue Oct 6, 2017
Closed
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 6, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@crisbeto crisbeto

Labels
None yet
Projects
None yet
Milestone
No milestone
5 participants
@petebacondarwin @crisbeto @maxime1992 @mariohmol @brunopereira27