On Gmail, why can't the "To" field be clicked with javascript?

I am building an accessibility tool that helps people with limited motor control write emails, hence I need programmatic focus of the "To" field (the first field in Gmail's compose window).

I have tried various combinations of the following in the Chrome devtools panel, on the textarea element, and it's parent. Nothing seems to get it focused.

setTimeout(() => {
    let el = document.querySelector('*[name="to"]');
    el.dispatchEvent(new MouseEvent('mouseover', {bubbles: true}));
    el.dispatchEvent(new MouseEvent('mousedown', {bubbles: true}));
    el.focus();
    el.dispatchEvent(new MouseEvent('mouseup', {bubbles: true}));
    el.click();
    console.log('done')
}, 5000)

Here is a sample of the relevant markup:

<div class="wO nr l1" style="">
    <input class="wA" tabindex="-1" aria-hidden="true">
    <textarea rows="1" id=":bw" class="vO" name="to" spellcheck="false" autocomplete="false" autocapitalize="off" autocorrect="off" tabindex="1" dir="ltr" aria-label="To" role="combobox" aria-autocomplete="list" style="width: 380px;"></textarea>
    <div class="aA6">
        <span>
            <div tabindex="1" style="background-color: transparent; width: 1px; height: 1px; position: absolute;"></div>
            <div tabindex="1" style="background-color: transparent; width: 1px; height: 1px; position: absolute;"></div>
            <span><span id=":8p" class="aB gQ pE" role="link" tabindex="1" data-tooltip="Add Cc recipients ‪(Ctrl-Shift-C)‬" aria-label="Add Cc recipients ‪(Ctrl-Shift-C)‬" style="user-select: none;">Cc</span><span id=":8o" class="aB  gQ pB" role="link" tabindex="1" data-tooltip="Add Bcc recipients ‪(Ctrl-Shift-B)‬" aria-label="Add Bcc recipients ‪(Ctrl-Shift-B)‬" style="user-select: none;">Bcc</span><span id=":aw" role="button" tabindex="1" aria-hidden="false" class="bcV Sz" style="display:none" data-tooltip="Some recipients use services that don't support encryption (click for details)" aria-label="Some recipients use services that don't support encryption (click for details)"></span></span><div tabindex="1" style="background-color: transparent; width: 1px; height: 1px; position: absolute;">
            </div>
        </span>
    </div>
</div>

from On Gmail, why can't the "To" field be clicked with javascript?