I am making a chrome extension where I need to add more functionality to the existing twitch chat.
The problem is, if I set a value of the textarea (the twitch chat text box) through javascript and then allow the user to hit enter or press the "Chat" button, the message being sent to the real time chat isn't the message I set through JS but only that is being sent that was typed by the user.
For example, first of all I am targeting the textarea by using the following code:
chat_textbox = document.getElementsByClassName('chat-input__textarea')[0].children[0].childNodes[0]
Now, let's say I set the value and the innerHTML of this textarea as follows:
chat_textbox.value = "Bitcoin"
chat_textbox.innerHTML = "Bitcoin"
Let's say these values are set when the user types in just "Bit", and not the whole word "Bitcoin". And then if the user tries to press enter key or click the "Click" button, even after the values of this textarea is set to "Bitcoin", but only "Bit" would be sent to the live chat.
Also, when the user either clicks or hovers over this textarea, the value set by me ("Bitcoin") is changed to just "Bit" again. So, I am assuming there's some functionality that keeps a record of what is being actually typed by the user and keeps on replacing it.
I want to prevent this default behavior to mess my custom functionality. What can I do?
From the behaviour you describe I would assume that the Twitch UI is listening for an event in order to update state somewhere to then read the value from the field, which is being missed out when you update the value programmatically.
Therefore to fix this you could manually trigger a change or input event after you update the value of the textarea.