Input with placeholder not playing nicely with angular-translate

[AntonTrapp]

I don't know if it is a angular-translate problem or a material problem, but the fix (#1279) only is working for hardcoded labels (... placeholder="whatever" ...). If I use angular-translate (... placeholder="{{'key' | translate}}" ...) the result is fine if the field is not in focus, if I click on it the placeholder appears 2 times (looks like I am drunk lol).

[ThomasBurleson]

Please provide a CodePen or Plunkr that demonstrates this issue.

[AntonTrapp]

Not with Plunkr. Tried to add material package on Plunkr - does nothing. Tried to copy the Getting started sample to Plunkr - not working there. A few minutes later Plunkr was offline.

Created a gist with CodePen: https://gist.github.com/anonymous/24a992448590489ce291

You can forget the CSS, the JS too (just provides a translation for the 'translate' filter.

In the form there are 2 input fields, one with a static label and the second with the translation via filter. provides the same generated HTML but looks ugly (label and placeholder if not in focus on the same position, blurry label if in focus). Tested on Chrome with this pen.

On Firefox the unfocused stuff is OK, but in focus the placeholder appers twice and blurry.

[KayEss]

The textarea is similarly broken with dynamic place holders.

[AntonTrapp]

Can confirm the textarea problem.

As a workaround: When I use it inside the template of a directive

emptyLabel: '@?'
...
data-placeholder="{{emptyLabel}}")

and call it like this:

data-empty-label='{{"model.user.email_placeholder" | translate}}'

it is working for me. I have just some additional attribute stuff going on in the compile function (that has nothing to do with the input problem, if it's not working without the compile function try to add a dummy attribute to the input - that's what i'm doing). Maybe this is working for all people that are waiting for a fix or is helping the developers.

[AntonTrapp]

"That is not an issue with translate. I have found your Pen http://codepen.io/anon/pen/OPBxBe and it clearly uses only a filter. In filters, no DOM operations are involved." - knalli #941 on angular-translate

So it is a material bug.

[denjello]

yes - I have seen this as well. My temporary CSS workaround was this:

:-webkit-input-placeholder {
  opacity:0;
}
:-moz-placeholder {
  opacity:0;
}
::-moz-placeholder {
  opacity:0;
}
:-ms-input-placeholder {
  opacity:0;
}

[zeeshanjan82]

Thanks @denjello