#StackBounty: #javascript DIV innerText fills but not trigger the change event

Bounty: 50

I’m trying to simulate a search on web version of Whatsapp (https://web.whatsapp.com). My goal is to do this task using pure JS, for study purposes. By looking the source code, i can see the search field is actually an editable DIV element :

enter image description here

With this source :

<div role="textbox" class="_13NKt copyable-text selectable-text" contenteditable="true" data-tab="3" dir="ltr"></div>

Here is what i tried :

1 – I first locate the element on page :

var node = document.getElementsByClassName('_13NKt copyable-text selectable-text')[0];

2 – I then set innertext :

node.innerText = 'test';

3 – The div is filled (although the placeholder is still there) , but the event that makes the search is not triggered :

enter image description here

4 – So i try to dispatch events that could trigger the ‘search’ event of the div :

node.dispatchEvent(new Event('input', { bubbles: true }));
node.dispatchEvent(new Event('change', { bubbles: true }));
node.dispatchEvent(new Event('keydown', { bubbles: true }));

Nothing really helped. At this point, the only way to make the page really search for ‘test’ string, is to manually click on the div and hit space bar.

What am i missing ?

Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.