After setting value property, how to cause textarea to update as if it was user input?

Question

I'm building a Chrome extension that enables the user to insert canned responses into Youtube comments on their channel. I insert the text using textarea's value property:

getHighlightedComment().querySelector("textarea").value = cannedResponseText

The problem is, the textarea doesn't adapt its size and the submit button doesn't get enabled until I type in another letter manually.

I have a different extension installed that has a similar functionality that doesn't have these problems, so it must be possible.

I already tried sending keypress/keydown/keyup events manually, but they seem to not work inside textareas. Nothing happens in response to them.

Answer 1

I guess you need to trigger some event on your field after actual change Here is how you can deal with it.

UPD.

I tried sending keypress/keydown/keyup events but it seems they don't work inside textareas. Nothing happens.

I guess it is more about onchange event.

Also you need to check the CSS of your textarea - rows are not hardcoded, height and max-height is not hardcoded (has value 'auto').

Here are some workarounds to update it with JS - https://stackoverflow.com/a/25621277/9994697