0

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?

Pedro Delfino
  • 2,421
  • 1
  • 15
  • 30
  • 1
    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 Kraynyak Sep 17 '22 at 00:24
  • Thanks, @Yulian. And how to solve this? Is it possible? – Pedro Delfino Sep 17 '22 at 01:29
  • 1
    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 Kraynyak Sep 17 '22 at 02:45

2 Answers2

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'));
}
Pedro Delfino
  • 2,421
  • 1
  • 15
  • 30
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?

Andrew Ramzy
  • 11
  • 2