how to trigger event listener iteratively using javascript?

Question

i want to create chrome extension that can automaticly input a text into input and execute the event listener from an element (it's a click-able svg). but i don't know how to implement it. i tried to look what was the event listener for this svg using chrome inspect but i still have no idea how it's work and how to make chrome extension as i planned. is it possible to do this? here's the search bar code. the click-able svg is the last one which have class i18n-icon-search. thank you!

<div class="arco-input-group i18n-ecom-select-search flex-1 arco-input-group-compact">
  <div tabindex="0" class="i18n-ecom-select arco-select arco-select-single arco-select-size-large" style="width: 122px;">
    <div class="arco-select-view">
        <input tabindex="-1" class="arco-select-view-input arco-select-hidden" value="Order ID" style="width: 100%; pointer-events: none;">
        <span class="arco-select-view-value">Order ID</span>
        <div class="arco-select-suffix">
            <div class="arco-select-arrow-icon">
                <svg viewBox="0 0 16 16" width="1em" height="1em">
                    <path fill-rule="evenodd" clip-rule="evenodd"
                        d="M3.646 6.146a.5.5 0 01.708 0L8 9.793l3.646-3.647a.5.5 0 01.708.708l-4 4a.5.5 0 01-.708 0l-4-4a.5.5 0 010-.708z">
                    </path>
                </svg>
            </div>
        </div>
    </div>
</div>
<div class="i18n-ecom-input arco-input-group-wrapper arco-input-group-wrapper-default arco-input-has-suffix">
    <span class="arco-input-group">
        <span class="arco-input-inner-wrapper arco-input-clear-wrapper">
            <input placeholder="Search Order ID" class="arco-input arco-input-size-default" value="">
            <span class="arco-input-group-suffix">
                <svg viewBox="0 -2 20 20" width="1em" height="1em" class="i18n-icon i18n-icon-text-delete">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M17 8A7 7 0 113 8a7 7 0 0114 0zm-4.646-2.354a.5.5 0 010 .708L10.707 8l1.647 1.646a.5.5 0 01-.708.708L10 8.707l-1.646 1.647a.5.5 0 01-.708-.708L9.293 8 7.646 6.354a.5.5 0 11.708-.708L10 7.293l1.646-1.647a.5.5 0 01.708 0z"></path>
                </svg>
                <svg viewBox="0 0 16 16" width="1em" height="1em" class="i18n-icon i18n-icon-division">
                    <path fill-rule="evenodd" clip-rule="evenodd"d="M8 11.5a.5.5 0 01-.5-.5V5a.5.5 0 011 0v6a.5.5 0 01-.5.5z"></path>
                </svg>
                <svg viewBox="0 0 16 16" width="1em" height="1em" class="i18n-icon i18n-icon-search">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M7 11a4 4 0 100-8 4 4 0 000 8zm0 1A5 5 0 107 2a5 5 0 000 10z"></path>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M10.354 9.646l2.5 2.5a.5.5 0 01-.708.708l-2.5-2.5.708-.708z"></path>
                </svg>
            </span>
        </span>
    </span>
</div>

Answer 1

Here how i do it to write to an input :

// write the value
document.querySelector(selector).value = value
// Dispatch the input event
document.querySelector(selector).dispatchEvent(new Event('input', {}))

Answer 2

First, get the parent div and find all input elements

document.getElementById('mydiv').getElementsByTagName('input')

this will return an array of all input elements in that div, after it loop through that array and for each element put this to fire the input event.

element.dispatchEvent(new Event('input', {bubbles:true}));

where 'element' is the input element of each loop iteration.