Paper-textarea label not moving as a floating label

[lpellegr]

Description

When a paper-textarea is empty and a call is done to set a new value programmatically, the new content overlaps the label.

Initial rendering:

After the value is set programmatically:

Expected outcome

I expect the label to move as a floating label and not stay a resting label:

Actual outcome

The floating label does not move as a floating label.

Steps to reproduce

0. Uses Polymer 2
1. Add a paper-textarea to your page:

<paper-textarea class="form-group" id="content" label="Content" max-rows="0" name="postContent" rows="5" required></paper-textarea>

2. In ready() method or on button tap, set the value programatically:

this.$.content.value = 'test';

I have tried to use updateValueAndPreserveCaret but the issue is the same.

The issue occurs only when the initial content is empty.

[denishamann]

Hello, I also have the same issue since a couple of days and can't find the reason why.

[notwaldorf]

If it just broke, would you mind updating web components and trying again? There was a polyfill problem that I think may be the culprit, since we haven't pushed any new changes to this element recently

[krumbunny]

It's been broken for awhile, at least since February.

For users: As a workaround the attribute always-float-label on a paper-textarea element will forgo the resting label, avoiding this issue (but disabling the nifty transition from resting to floating label)

[yairopro]

Hello.
I've got the same problem.
Hope this problem will soon be solved.
Thanks a lot @krumbunny for the workaround. It works like a charm. I just have to bind the paper-input.value property to this always-float-label property to fix the problem.

[shaeberling]

I just ran into the same issue today. Any ETA on a fix? Seems like a pretty common problem.

[Ravikumar-Dhanasekaran]

Similar issue. Not able to fix. Please post any workaround.?

[yairopro]

Here's a workaround:
<paper-textarea always-float-label="[[value]]" value="{{value}}"></paper-textarea>
This way it forces the label to float if there's a value in the input.

[kreinholt]

I believe this is caused by the following commit: PolymerElements/iron-autogrow-textarea@2dba77f. The line this.fire('bind-value-changed', {value: this.bindValue}); has been commented out.

[catiejo]

Thank you, @kreinholt! I was also struggling with this bug--I tried uncommenting it and the functionality went back to normal. Also props to the programmer that put this comment above the commented code it: This code is from early 1.0, when this element was a type extension. It's unclear if it's still needed, but leaving in in case it is. It's far from best practice to edit the code directly like this, but I think it's the easiest workaround until there's a less hacky/1.0 fix.

[yglodt]

I see the same problem on a paper-input.

[notwaldorf]

Marking this as a duplicate of #508 (and looking at that PR which should fix both of these right now)

[notwaldorf]

(fixed with the 2.1.1 release of iron-autogrow-textarea btw)