Title: WhatsApp Web Automation - Search Not Triggering Results

Issue:

I am automating WhatsApp Web to open a new chat, enter a phone number in the search bar, and load results. The number appears in the input field, but WhatsApp does not process it, and no results appear.

Code:

const number = "xxxxxx"; // Replace with your number

const newChatButton = document.querySelector('[data-icon="new-chat-outline"]');
newChatButton?.click();

const interval = setInterval(() => {
  const SEARCH_INPUT = document.querySelector('[aria-label="Search name or number"]');
  if (SEARCH_INPUT) {
    SEARCH_INPUT.focus();
    SEARCH_INPUT.click();
    SEARCH_INPUT.dispatchEvent(new InputEvent("input", { bubbles: true, data: number }));
    clearInterval(interval);
  }
}, 500);

Expected Behavior:

1. Click New Chat.
2. Insert the phone number.
3. WhatsApp searches and loads results.

Observed Behavior:

• The number appears but WhatsApp does not process it.
• Manually typing works fine.

Question:

How can I trigger WhatsApp's internal event listeners so it properly searches the number?

Title: WhatsApp Web Automation - Search Not Triggering Results

Issue:

I am automating WhatsApp Web to open a new chat, enter a phone number in the search bar, and load results. The number appears in the input field, but WhatsApp does not process it, and no results appear.

Code:

const number = "xxxxxx"; // Replace with your number

const newChatButton = document.querySelector('[data-icon="new-chat-outline"]');
newChatButton?.click();

const interval = setInterval(() => {
  const SEARCH_INPUT = document.querySelector('[aria-label="Search name or number"]');
  if (SEARCH_INPUT) {
    SEARCH_INPUT.focus();
    SEARCH_INPUT.click();
    SEARCH_INPUT.dispatchEvent(new InputEvent("input", { bubbles: true, data: number }));
    clearInterval(interval);
  }
}, 500);

Expected Behavior:

1. Click New Chat.
2. Insert the phone number.
3. WhatsApp searches and loads results.

Observed Behavior:

• The number appears but WhatsApp does not process it.
• Manually typing works fine.

Question:

How can I trigger WhatsApp's internal event listeners so it properly searches the number?

• javascript
• google-chrome
• google-chrome-extension
• dom-events

1 Answer 1

function triggerWhatsAppSearchEnhanced(phoneNumber) { console.log("Starting enhanced WhatsApp search solution");

// Step 1: Click new chat button
const newChatButton = document.querySelector('[data-icon="new-chat-outline"]');
if (newChatButton) {
    newChatButton.click();
    console.log("✓ New chat button clicked");
} else {
    console.error("✗ New chat button not found");
    return;
}

// Step 2: Wait for the search div to appear in the DOM
setTimeout(() => {
    const searchDiv = document.querySelector('div[contenteditable="true"][aria-label="Search name or number"]');
    if (!searchDiv) {
        console.error("✗ Search div not found");
        return;
    }
    console.log("✓ Search div found");

    // Clear any existing content and focus the input
    searchDiv.innerHTML = '';
    searchDiv.focus();
    console.log("✓ Search input cleared and focused");

    // Dispatch initial focus events
    searchDiv.dispatchEvent(new FocusEvent('focusin', { bubbles: true }));
    searchDiv.dispatchEvent(new FocusEvent('focus', { bubbles: true }));

    // Paste the entire phone number at once
    searchDiv.innerText = phoneNumber;
    console.log("✓ Full phone number pasted:", phoneNumber);

    // Dispatch an input event with the full phone number
    searchDiv.dispatchEvent(new InputEvent("input", { bubbles: true, data: phoneNumber }));

    // Add a slight delay then add a space to trigger the search
    setTimeout(() => {
        // Append a space to trigger search functionality
        searchDiv.innerText += ' ';
        searchDiv.dispatchEvent(new InputEvent('input', { bubbles: true, data: ' ' }));
        console.log("✓ Space added to trigger search");

        // Finally, simulate pressing the Enter key to confirm the search
        setTimeout(() => {
            searchDiv.dispatchEvent(new KeyboardEvent('keydown', {
                key: 'Enter',
                code: 'Enter',
                keyCode: 13,
                which: 13,
                bubbles: true
            }));
            searchDiv.dispatchEvent(new KeyboardEvent('keyup', {
                key: 'Enter',
                code: 'Enter',
                keyCode: 13,
                which: 13,
                bubbles: true
            }));
            console.log("✓ Pressed Enter to confirm search");
        }, 300);
    }, 300);
}, 1500);

}