Input form is judged to be empty even after value is set by JavaScript

Question

I'm trying to write a small script which automatically inputs a username in this login page. According to Inspector (of Firefox), the input field is identified as the CSS selector input.input.input-text.input-default. So I wrote the script below.

(function() {
    "use strict";

    window.setTimeout(() => {
        const username = document.querySelector('input.input.input-text.input-default');
        username.setAttribute('value', 'test');
    }, 100); //waits a little until the input form becomes available

})();

This actually succeeds in inputting the username test, but when I input the password and click the submit button, the error message

username is required

is printed even though the field is not empty.

After that, if I click the username field, append any character, remove the character and then again click the submit button (see gif below), now the value of the field is correctly interpreted and the error message

Authentication failed

is printed, which is totally ok since we use the invalid test as a username.

I think this behavior comes from events associated with the input field. According to Inspector, focus, invalid, keydown, mousedown and onChange events are bound to the field. However, even if I execute

username.dispatchEvent(new Event('onChange'));

or such, the value is still interpreted as empty.

Two questions:

• How can I make the script work in this case?

• If you succeed in making the script work, could you tell me how you have analyzed the code structure of the website? Now I use Inspector but it seems insufficient.

Answer 1

Question 1

Just adding the line below to the first snippet, the problem has been solved.

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

So the resultant code should be

(function() {
    "use strict";

    window.setTimeout(() => {
        const username = document.querySelector('input.input.input-text.input-default');
        username.setAttribute('value', 'test');
        username.dispatchEvent(new Event('input', {bubbles: true})); //only difference
    }, 100);

})();

I do not know, however, why {bubbles: true} does the trick.

Question 2

Here is how I came up with the line:

1. When I execute console.log(username), I found the object has the property __reactEventHandlers who has onChange method. Since

username.dispatchEvent(new Event('onChange'));

username.dispatchEvent(new Event('change'));

username.dispatchEvent(new Event('input'));

, etc. didn't work at all, I suspected the __reactEventHandlers is relevant in this case.

2. To call the onChange method from JavaScript, I googled "javascript call react onchange" and found this answer.

---

Again, I do not know why {bubbles: true} does the trick, which should be appended to this answer or be explained in another answer.