Material: mdInput duplicates the label while bind placeholder

[leocaseiro]

I realized that if we want to bind the placeholder, the automatic label generated get's duplicated on Chrome and Safari on OSX.

My code example:

$scope.label = 'Date of Birth';

<md-input-container>
    <input type="text" placeholder="{{label}}">
</md-input-container>

Here is a GIF of this bug:

Angular 1.5.3
Angular Material 1.1.0-rc4
https://codepen.io/leocaseiro/pen/GZYZxr

[RolandHeath]

I believe the standard way to do this would be to use <label>{{label}}</label> inside the md-input-container, instead of the placeholder attribute on your input.

I'm not sure if this is on the radar to be fixed, but the main reason for it is that you can have both placeholder and label, so when the label shrinks up the placeholder is visible.
It seems that if you don't define a label yourself, it doesn't force the label to the top, so they both show down the bottom. Example of alternatives here

What I find more interesting is the fact that they don't line up perfectly, which is something that probably should be standardised/fixed. Hackishly fixed example of this here

[crisbeto]

It's because the setHasPlaceholder is called only on init.

As for aligning the text right on top of each other, I think that might be problematic since not all browsers/OS-es render fonts in the same way and it's a lot of trouble for not a lot of reward. This shouldn't be an issue if the setHasPlaceholder gets called when the placeholder changes, though.

[RolandHeath]

@crisbeto That sounds like perfectly sound reasoning for not changing the alignment. I hadn't thought about how other browsers than chrome would handle it.
Using <label> is definitely the right way to go here.

[crisbeto]

Actually this turned out to be a bit more complicated than just observing and calling setHasPlaceholder. When we try to transfer the placeholder to the label, Angular keeps re-adding the attribute. I have a fix for it though.