valueForMirror in autogrow-textarea now replaces spaces with  

[tyler-sommer]

If a line starts with a space, the mirror does not offset properly.

This modifies the valueForMirror function to replace spaces with  .

[Arduinology]

I am having this issue. I tried to apply the changes in /~https://github.com/veonik/paper-input/commit/4c3f2c20cc033bc104248d00ae6cf1e3e58ea51a but it ended up making it so the autogrow update method did not work.

[morethanreal]

There are two bugs with this PR:

1. The & in   is replaced with & since the & is replaced after the space.
2.   is not the same width as a regular space due to kerning. Try entering a long paragraph and you will see the mirror is not exactly the same width as as the input.

[morethanreal]

Also, please add tests :)

[tyler-sommer]

Thanks for the feedback, @Arduinology and @morethanreal. I'll make some time in the next week or so to try and iron things out. Cheers!

[Arduinology]

I found that just hiding the mirror with a display:none; makes things look great to me. Why is the mirror visible in the first place? I can't seem to find any documentation on it.

[morethanreal]

@Arduinology The element is auto sized with the mirror since a text area doesn't auto resize (instead of scrolling) as you type. Making the mirror display:none shouldn't work at all?

[Arduinology]

@morethanreal sorry I was mistaken. I did the following within paper-autogrow-textarea.html. This isn't perfect since currently this means every paper-autogrow-textarea requires an ID for this to work.

.mirror-text { 
  visibility: hidden; 
}

I did the following (jquery) to update the height of any paper-autogrow-textarea's within the polymer ready callback.

//check if element exists
if(($('paper-autogrow-textarea').length > 0)) {
  $('paper-autogrow-textarea').each(function (index, el) {
    // if the text area of the autogrow element has any text within...
    if($('#'+$(el).attr('id')+' > textarea').html().length > 0) {
      //update the element based on id
      el.update(document.querySelector("#"+$(el).attr('id')+" > textarea"));
    }
  });
}

I might be incorrect in understanding how these work but I am unsure what else to do when loading a number of pre-populated autogrow textareas.