[FIXED] Why tweaking this input field value with JavaScript in the browser console does not behave exactly as manually inserting the value?

Issue

I am trying to play with some data insertion on forms of this website. I can manually put my cursor on inputs and type digits, such as 999. If I reload the page, the value that I typed is still there.

I can access this value by using Google Chrome console (on dev tools) and using the element ID OSICtrlE1-23:

> document.querySelector("#OSICtrlE1-23").value 
'999'

Ok. Apparently, until some point, I can also mutate this value using JS and the console:

> document.querySelector("#OSICtrlE1-23").value = 888

It seems to work on the UI. I can see the new value on the UI.

Also, it seems to work on the console when I request the value on the console with JS:

document.querySelector("#OSICtrlE1-23").value 
'888'

Unfortunately, if I refresh the page, the value on the UI goes back to 999 (which was the previous value manually inserted).

1 - Why is this happening?

2 - Could the website be restricting what I can do with the console? If so, how to know?

3 - Which command on the console should I be using in order to have the data inserted by computation behaving exactly as the data manually inserted?

Solution

@Yulian was correct. After carefully inspecting how events were being handled, a reverse engineering endeavor found out that blur was the key. Hence, dispatching the event did the trick!

See the code that works as expected:

const updateInput = (value) => {
   const input = document.querySelector("#OSICtrlE1-23");
   input.value = value;
   input.dispatchEvent(new Event('blur'));
}

Answered By - Pedro Delfino

Answer Checked By - Cary Denson (PHPFixing Admin)