Imitate user input in a React controlled input

Question

I want to automate a React app by filling forms using a js snippet, but I cannot make it to call the onChange handler. I emit the change event with the following code:

const event = new Event("change", 
{ 
    bubbles: true, 
    cancelable: true, 
    view: window,
    target: { value: "new value"}
});
const element = document.querySelector("#inp");
element.value = "new value";
const cancelled = element.dispatchEvent(event);

but the React refuses to change the value of the text input.

The complete example is here https://jsfiddle.net/gLysoa8v/3/

score 0 · Accepted Answer · answered Dec 21 '19 at 14:27

After googling a bit I found the solution in this question: What is the best way to trigger onchange event in react js

var nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;
nativeInputValueSetter.call(input, 'react 16 value');

var ev2 = new Event('input', { bubbles: true});
input.dispatchEvent(ev2);

Imitate user input in a React controlled input

1 Answers1