Wrong behavior in paper-autogrow-textarea: duplicated text behind + doesn't grow

[DamianGarro]

When you finish a line you can see a duplicated text "behind" the textarea and it doesn't always grow up.

(From http://jsfiddle.net/bpddax1L/ )

This happens to me in my netbook (Windows 7 32 bits), tested in:

• Chrome 40.0.2214.6 dev-m
• Opera 25.0.1614.71

I also tested it in a desktop computer (Windows 7 64 bits):

• Chrome 38.0.2125.111
• Firefox (I didn't check the version)
• IE11 (ditto)

Windoes 7 in all cases.

In Firefox and IE the duplicated text was invisible, but I could see the horizontal scroll bar growing up as I wrote.

[DamianGarro]

Oh, I just realized that the problem may be that long words (no separations with " " or "-") can't be "broken" into two lines.

(I'm just pressing "space" -> "backspace" -> "-" -> "backspace" and all again in infinite a loop.)

[morethanreal]

The text duplication is fixed in 2f4c286. If the line is too long and it can't be linebroken, it'll scroll horizontally. Please close this bug if this resolves your issue!

[DamianGarro]

OK, I tested it. The text duplication is now invisible, that's good. However, the horizontal scroll is for the mirror div (invisible), not for the textarea.The big word in the textarea is -and was originally- actually breaking and the textarea grows up, but not the paper-autogrow-textarea (because the div is not breaking the word). So, you can se the vertical scrolling the textarea:

(Two words separated with " ": "Polymer" and "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ")

But I fixed it in #109, now the div is also breaking the long word like the textarea and both grow up. :)

Here you can test it:
http://jsfiddle.net/mf84ruo0/
Polymer 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ

[benjaminapetersen]

@morethanreal's comment "The text duplication is fixed in 2f4c286." probably fixes the issue I was just experiencing, but adding it to this issue to be thorough.

Working with Polymer 0.5.1 and I experience the layered text effect if I style the paper-autogrow-textarea instead of the textarea (which is the wrong thing to style, but was interesting enough to report).

      paper-autogrow-textarea {
        color: #A6A6A6;
      }

    <paper-input-decorator
      label="What issue did you encounter?"
      floatingLabel>
      <paper-autogrow-textarea>
        <textarea
          value="{{body}}"></textarea>
      </paper-autogrow-textarea>
    </paper-input-decorator>

Experience is very similar to what @DamianGarro reported originally.

[pjjjv]

I still see the garbled text if some lines start with spaces and you insert newlines.

[copet80]

Have you tried putting in your CSS:
paper-input {
word-wrap: break-word;
word-break: break-all;
}