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

Question

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?

This is most likely related to state or a cache of some kind. Directly editing an element's value via dev-tools bypasses many of the events usually associated with inputs (onChange and the like). — Yulian
– Yulian, Commented Sep 17, 2022 at 0:24
I've never heard of a use-case like this before, my guess would be it's not. You can try using the React Dev Tools extension in Chrome/Firefox to directly mess with components/methods — Yulian
– Yulian, Commented Sep 17, 2022 at 2:45

Pedro Delfino · Accepted Answer · 2022-09-18 22:27:36Z

2

@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 Sep 18, 2022 at 22:27

Pedro Delfino

2,7511 gold badge22 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andrew Ramzy · Accepted Answer · 2023-05-01 19:08:55Z

1

the secret behind dispatching the right event , @Pedro's solution works for most cases but this solution worked for me

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

Source How do I programmatically trigger an “input” event without jQuery?

answered May 1, 2023 at 19:08

Andrew Ramzy

112 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related