Textarea binding removes CR on edit

I’m having an issue binding text to a textarea when the text contains a CR + LF. The text displays correctly, but, when I edit the text (e.g. just add a character at the end), it appears that the binding engine somehow strips the CR out of the middle of the text.

export class Tester {
   private origValue : string = "a \r\n b"
   private editValue : string = this.origValue;
   private origChars : string = ""
   private editChars: string = ""

   activate() {

   public computeChars(){
        this.origChars = this.editChars = ""

        for(let x = 0; x < this.origValue.length; x++){
            this.origChars += `${this.origValue.charCodeAt(x)} `

       for(let x = 0; x < this.editValue.length; x++) {
           this.editChars += `${this.editValue.charCodeAt(x)} `
   <div style="color: green">${origChars}</div>
   <div style="color: red">${editChars}</div>
   <textarea rows="4" value.bind="editValue" change.delegate="computeChars()" />
   <div if.bind="origChars != editChars">Text has been edited</div>

When I run this code, I see this:


Note the 13 10 in the middle.

Now if I click in the textarea and add a space at the end of the text (after the b) and tab out of the textarea, I see this:

Note the characters of the original line (green) still has 13 10 but the characters of the edited line (where I ONLY added a space at the end) is now missing the 13.

If I place my cursor back in the textarea at the end of the text and remove the character I added, you would expect the Text has been edited message to disappear, but it doesn’t because the CR was somehow removed.

Is the Aurelia binding engine somehow stripping out my CR?

You should test without aurelia, just plain html and js to get the changed text. It is probably the behavior of plain textarea, html is not invented on windows platform after all.

It’s a textarea behaviour as expected, not related to Aurelia.

Thanks, I hadn’t even though about it being a normal behavior of html.