为什么为输入设置值在 Whatsapp 上不起作用？

Question

My JS skills are limited and i'm starting my studies on React.

I want to do a simple task: just access the web version of Whatsapp ( https://web.whatsapp.com ), and fill the input to search a contact. I want to do via JS the same thing i do when i manually enter the input and type a contact name: Whatsapp will search for this contact and show the results.

Because the page has only one input, my first try was to simple set the value of this input:

document.getElementsByTagName('input')[0].value = 'contact name';

This will fill the input, but not trigger the event that would make Whatsapp actually search the contact; see the image below:

So i tried another approach, as suggested in an answer to a similar question i made last week:

var setValue = Object.getOwnPropertyDescriptor(
  window.HTMLInputElement.prototype,
  "value"
).set
var modifyInput = (value) => {
  const input = document.getElementsByTagName('input')[0]
  setValue.call(input, value)
  input.dispatchEvent(new Event('input', { bubbles: true}))
}

modifyInput('contact name')

In this case, nothing happens at all, no errors but the input is not filled.

What approach should i take to achieve this task?

Answer 1

At the time of writing, the page is using React, so the workaround for setting value is probably still needed. But the element also needs to gain focus before the search is active:

var setValue = Object.getOwnPropertyDescriptor(
  window.HTMLInputElement.prototype,
  "value"
).set
var modifyInput = (value) => {
  const input = document.getElementsByTagName('input')[0]
  input.dispatchEvent(new Event('focus', { bubbles: true}))
  setValue.call(input, value)
  input.dispatchEvent(new Event('input', { bubbles: true}))
}

modifyInput('contact name')

---

For similar investigations, event listeners can be inspected in browser dev tools, eg in Firefox: