Very limited <textarea> buffer length

[x95]

I was making an app which includes a  <textarea> element in the SVG section. I have no CSS styles for the tag. I'm using JS to add characters one by one to the textarea, but whenever I try to add anything to the textarea, I'm only able to add 3 characters to it even though I have set its width to 73% of the viewport. What's even weirder is that a substantial amount of space of the textarea is still unused when I get the "New element text larger than buffer!" warning in the console. Does anyone know why this is happening, and how to fix it?

My code (SVG) I have the JS code linked to the SVG file:

<section x="0" y="0" height="20%" width="100%" class="row">
    <textarea x="0" y="10%" height="100%" width="73%" fill="white" id="display" text-anchor="end">
    </textarea>

</section>

Code for adding new things:

import document from "document";

var addChar = function(x){
   currentVal += x;
   document.getElementById("display").text = currentVal;
}

let key1 = document.getElementById("foo");

key1.onactivate = function(evt) {addChar("a")}

Note: I couldn't find an SVG label for this post so I chose SDK for the tag.

[x95 · Accepted solution]

Sorry, I just found out the answer myself 😂

So what you need to do is just set the "text-length" attribute of the textarea to a different number, e.g. 10. This example would allow the max length of the textarea to be 10 characters. 

However, I have no idea why Fitbit chose "3" as the default max text length (see above post).