Background

I am still learning a bit about creating DOM JavaScript methods so I apologize if this is something that is considered straight forward or I am missing something very simple. I have a few automations I am trying to set up to automatically log into online accounts. I am testing my JavaScript within the Chrome browser.

Problem

In this example I am trying to log into a website and am presented with a username and password form to fill out. My goal is to programmically fill this out and log in. After inspecting the page I have gathered the username ID name and have the following code:

var username_field = window.document.getElementById("dom-username-input");
username_field.value = "myusername";
username_field.dispatchEvent(new Event("input"));

The issue is that when I click the submit button, it tells me that the username field needs to be filled out and is blank, so for some reason it is not registering what was put in through my JavaScript. On other automations, I have to dispatch the correct event. I have tried using input, change, keydown, and a few others but have not been able to succeed. I believe I do not know the correct event to dispatch or possibly I am missing something else?

HTML used to create the element from Fidelity's site

<input class="pvd-input__input" required="" aria-describedby="dom-username-error-alert" aria-required="true" id="dom-username-input" type="text" maxlength="50" autocomplete="off" data-gtm-form-interact-field-id="0" aria-invalid="true">

The HTML for the Log in button:

<button class="pvdccl-button-root pvd-button--full-width pvd-button--primary" id="dom-login-button" type="submit"><!--?lit$627829735$--><div class="pvd-button__contents"><!--?lit$627829735$--><s-slot name="icon-left"><s-assigned-wrapper></s-assigned-wrapper></s-slot><!--?lit$627829735$--><span class="pvd-button__text"><s-slot><s-fallback-wrapper hidden="true"><!--?lit$627829735$--></s-fallback-wrapper><s-assigned-wrapper>Log in</s-assigned-wrapper></s-slot></span><!--?lit$627829735$--><s-slot name="icon-right"><s-assigned-wrapper></s-assigned-wrapper></s-slot></div></button>

As you can see it is just an input element which is why I don't know why triggering an input event doesn't work