[Solved] How to set value of chat input textarea

Chat and IRC
1

I’m working on a Chrome extension and having issues with setting the value of the chat input <textarea> programatically. With the below approach, I can briefly see a value change, but then it disappears (likely a controlled component). I’ve tried sending some KeyboardEvent after changing the value, but haven’t had any luck. Any ideas on how I could best set this value?

let chatInput = document.querySelector('.chat-input textarea');
chatInput.value = chatInput.value + ' testing...';

Solution:
The chatInput is what is known as a “controlled component” in the world of UI libraries like React (which Twitch uses) or Vue. The application manages the value of the <textarea> interally, controlling what happens to incoming input through event listeners. So to change the value, you want to do so through mimicking the event.

A naive solution that I was able to start moving ahead with in this case after setting the value is:

chatInput.dispatchEvent(new Event('input', { bubbles: true }));

Ideally you’d want the dispatched event to contain the actual data I think, so if someone knows how to do that or has a better way, please chime in.

Similar Threads:

2

You were answered on the thread you necroed

4

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.