Trying to automate web site login presenting userid/password login with placeholders with Chrome Extension MV3 and vanilla Javascript

I'm on this personal project to automate a relatively complex workflow across two different web sites by developing a Chrome extension under MV3; this includes site interaction, along with Dropbox and GoogleSheets read & write interactions.

I've successfully accomplished the full workflow with my first web site (namely logging in to the site, navigating through different pages while interacting with different dynamic DOM elements to enter information, downloading, uploading, copying and moving files from/to Dropbox, updating my Google Sheet, etc.)

I now need to interact with the second web site, and I am stuck with what I believe should be a non-issue: just logging in to the website.

The login page of the second site see seems quite standard; it presents a form (with id "UsernameAndPassword") including two input fields (with id's "username" and "password") and a button (with id "loginFormUsernameAndPasswordButton")

actual site image

The input fields, however, show some kind of placeholder string values by default, namely "e-mail" and "Mot de passe".

With human interaction, actually clicking on the form fields clears up the default value, and then you can type your information and click the "login" button form successfully.

I know it is possible to automate this login flow because I use Roboform password manager and it does login to the site with no sweat.

HOWEVER,

when I set those fields in my chrome extension content script by using document.getElementById("username").value = "dummyusername") and document.getElementById("username").value = "dummypassword"), those set values do appear but kind of "overwritten" on top of the default placeholders (i.e, both the default placeholders AND the values I set are visible);

This is what it looks like from de DevTools console
enter image description here

If I then trigger the click action on the form button by using document.getElementById("loginFormUsernameAndPasswordButton").click(), those values I set with my script are cleared up and I get the error message corresponding to the situation where the username/password fields are blank (as if I had not set them).

I have also tried to first set the focus to those fields, but it does not seem to make any difference.

Can you guys please help or give pointers on how to deal with this? Thank you in advance!

wOxxOm's pointer in his comment (to use the deprecated document.execCommand and check this example) did solve my problem.

I don't see how to accept your comment as the answer or to properly thank you for your help, so I'm posting as an answer what I did to solve my issue thanks to your help.

In fact, I do need to thank you much more, since I believe I must have solved around 80% of the most difficult situations in my personal project over the past months by analyzing your tips, explanations and/or pointers to examples.

This is what works in my case to set those input fields:

let userid = "myuserid"
let password = "mypassword"
document.getElementById("userid").focus()
document.execCommand('insertText', false, userid)
document.getElementById("password").focus()
document.execCommand('insertText', false, password)
document.getElementById("login_button").click()