changing React.js form values from a chrome extension

Question

I'm not developing in React.js, but I'm working on a chrome extension that needs to programatically fill form values for different kinds of sites.

The site uses React.js, and I'm filling the value in the usual way with:

element = document.querySelector("input[name=firstName]");
element.value = "something";

When the user clicks the submit button, he gets this error for that form element, even if the element has a value: "This information is required."

It doesn't help if fire "change" event for that element.

evt = document.createEvent("HTMLEvents");
evt.initEvent("change", false, true);
element.dispatchEvent(evt);

There is some method in the React.js framework I need to call to programatically change the value? Help from React.js experienced users is appreciated!

Answer 1

I found a solution. Call element.select(); before changing the value.