To address the issue with React JS used in designing whatsapp web, it is recommended to recall the event within setTimeout for effective management.
Explanation of the problem:
Upon the initial event triggering, the whatsapp web screen will release all input focus from the app screen, necessitating a repeated event trigger to simulate human interaction in the browser.
function executeSearch(contact_name = "") {
search = document.querySelector('#side > div._1Ra05 > div > label > div > div._1awRl.copyable-text.selectable-text');
var focusEvent = new FocusEvent('focus', {
bubbles: true,
cancelBubble: false,
cancelable: true,
composed: true,
currentTarget: null,
defaultPrevented: false,
detail: 0,
eventPhase: 0,
isTrusted: true,
});
// Events for entering value in search box
var inputEvent = new InputEvent('input', {
bubbles: true
});
search.textContent = contact_name;
search.dispatchEvent(focusEvent);
search.dispatchEvent(inputEvent);
setTimeout(function() {
search.textContent = contact_name;
search.dispatchEvent(focusEvent);
search.dispatchEvent(inputEvent);
el = document.querySelector("#side > div._1Ra05 > div > label > div > div._1awRl.copyable-text.selectable-text");
var event = new KeyboardEvent('keydown', {
code: 'Enter',
key: 'Enter',
keyCode: 13,
view: window,
bubbles: true
});
el.dispatchEvent(event);
}, 1000)
}
executeSearch("name");
function invokeMouseEvent(el, etype) {
console.log(el)
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent(etype, true, true, window,0, 0, 0, 0, 0, false, false, false, false, 0, null);
el.dispatchEvent(evt);
}