# \[Solved\] How to set value of chat input textarea

**URL:** <https://staging-discuss.dev.twitch.com/t/solved-how-to-set-value-of-chat-input-textarea/15746>\
**Category:** Chat and IRC\
**Created:** [May 12, 2018, 10:04am UTC](https://staging-discuss.dev.twitch.com/t/solved-how-to-set-value-of-chat-input-textarea/15746 "2018-05-12T10:04:23Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Samiff](https://d1d6mrmdu7ztse.cloudfront.net/user_avatar/staging-discuss.dev.twitch.com/samiff/32/3004_2.png) [@Samiff](https://staging-discuss.dev.twitch.com/u/Samiff)\
**Post date:** [May 12, 2018, 10:04am UTC](https://staging-discuss.dev.twitch.com/t/solved-how-to-set-value-of-chat-input-textarea/15746/1 "2018-05-12T10:04:23Z")

</div>

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?

```auto
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:

```auto
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** :

> [@Chrome Extension - custom emote picker](https://staging-discuss.dev.twitch.com/t/chrome-extension-custom-emote-picker/15242):
>
> I am working on a Chrome extension that adds custom emotes to the chat. I added emote-menu and it successfully adds img’s alt value into the text area but clicking on “Chat” button does not send the message into the chat unless i manually add at least one character of my own inside text area. Is there an event that i should trigger to make it work like a spacebar keypress? I tried both .value and .innerHTML Here is what i use. var chatInput = document.querySelector('textarea[data-a-target="…

> [@Chrome extension that sends a message every a specific period of time](https://staging-discuss.dev.twitch.com/t/chrome-extension-that-sends-a-message-every-a-specific-period-of-time/15642):
>
> I’m developing a chrome extension that sends a message every a specific period of time by changing value into the text area but clicking on “Chat” button does not send the message into the chat unless i manually add at least one character of my own inside text area. is that because the chrome extension I am developing not flagged as known bot or verified bot? I’m new to twitch TV community so titles like “verified\_bot” , “white\_list” and “known\_bot” are new to me and I have no enough knowledge…

---

<div class="post-metadata">

**Author:** ![BarryCarlyon](https://d1d6mrmdu7ztse.cloudfront.net/user_avatar/staging-discuss.dev.twitch.com/barrycarlyon/32/253_2.png) [@BarryCarlyon](https://staging-discuss.dev.twitch.com/u/BarryCarlyon)\
**Post date:** [May 12, 2018, 11:23am UTC](https://staging-discuss.dev.twitch.com/t/solved-how-to-set-value-of-chat-input-textarea/15746/2 "2018-05-12T11:23:29Z")

</div>

You were answered on the thread you necroed

> [@Chrome Extension - custom emote picker](https://staging-discuss.dev.twitch.com/t/chrome-extension-custom-emote-picker/15242/4):
>
> Matchbook necroed this thread and started their own here

---

<div class="post-metadata">

**Author:** ![system](https://d2spem0quai2ol.cloudfront.net/original/2X/0/05909729875cce3b53e59d5561c4d23bb14948fc.png) [@system](https://staging-discuss.dev.twitch.com/u/system)\
**Post date:** [June 11, 2018, 12:05pm UTC](https://staging-discuss.dev.twitch.com/t/solved-how-to-set-value-of-chat-input-textarea/15746/4 "2018-06-11T12:05:36Z")

</div>

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