How to programmatically fill input elements built with React?

This accepted solution appears not to work in React > 15.6 (including React 16) as a result of changes to de-dupe input and change events.

You can see the React discussion here: https://github.com/facebook/react/issues/10135

And the suggested workaround here: https://github.com/facebook/react/issues/10135#issuecomment-314441175

Reproduced here for convenience:

Instead of

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

You would use

function setNativeValue(element, value) {
  const valueSetter = Object.getOwnPropertyDescriptor(element, 'value').set;
  const prototype = Object.getPrototypeOf(element);
  const prototypeValueSetter = Object.getOwnPropertyDescriptor(prototype, 'value').set;

  if (valueSetter && valueSetter !== prototypeValueSetter) {
    prototypeValueSetter.call(element, value);
  } else {
    valueSetter.call(element, value);
  }
}

and then

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

Here is the cleanest possible solution for inputs, selects, checkboxes, etc. (works not only for react inputs)

/**
 * See [Modify React Component's State using jQuery/Plain Javascript from Chrome Extension](https://stackoverflow.com/q/41166005)
 * See https://github.com/facebook/react/issues/11488#issuecomment-347775628
 * See [How to programmatically fill input elements built with React?](https://stackoverflow.com/q/40894637)
 * See https://github.com/facebook/react/issues/10135#issuecomment-401496776
 *
 * @param {HTMLInputElement | HTMLSelectElement} el
 * @param {string} value
 */
function setNativeValue(el, value) {
  const previousValue = el.value;

  if (el.type === 'checkbox' || el.type === 'radio') {
    if ((!!value && !el.checked) || (!!!value && el.checked)) {
      el.click();
    }
  } else el.value = value;

  const tracker = el._valueTracker;
  if (tracker) {
    tracker.setValue(previousValue);
  }

  // 'change' instead of 'input', see https://github.com/facebook/react/issues/11488#issuecomment-381590324
  el.dispatchEvent(new Event('change', { bubbles: true }));
}

Usage:

setNativeValue(document.getElementById('name'), 'Your name');
document.getElementById('radio').click(); // or setNativeValue(document.getElementById('radio'), true)
document.getElementById('checkbox').click(); // or setNativeValue(document.getElementById('checkbox'), true)

I noticed the input element had some property with a name along the lines of __reactEventHandlers$..., which had some functions including an onChange.

This worked for finding that function and triggering it

Update: __reactEventHandlers$... seems to have changed name to __reactProps$..., so try that in the .filter below instead

let getReactEventHandlers = (element) => {
    // the name of the attribute changes, so we find it using a match.
    // It's something like `element.__reactEventHandlers$...`
    let reactEventHandlersName = Object.keys(element)
       .filter(key => key.match('reactEventHandler'));
    return element[reactEventHandlersName];
}

let triggerReactOnChangeEvent = (element) => {
    let ev = new Event('change');
    // workaround to set the event target, because `ev.target = element` doesn't work
    Object.defineProperty(ev, 'target', {writable: false, value: element});
    getReactEventHandlers(element).onChange(ev);
}

input.value = "some value";
triggerReactOnChangeEvent(input);

React 17 works with fibers:

function findReact(dom) {
    let key = Object.keys(dom).find(key => key.startsWith("__reactFiber$"));
    let internalInstance = dom[key];
    if (internalInstance == null) return "internalInstance is null: " + key;

    if (internalInstance.return) { // react 16+
        return internalInstance._debugOwner
            ? internalInstance._debugOwner.stateNode
           : internalInstance.return.stateNode;
    } else { // react <16
        return internalInstance._currentElement._owner._instance;
   }
}

then:

findReact(domElement).onChangeWrapper("New value");

the domElement in this is the tr with the data-param-name of the field you are trying to change:

var domElement = ?.querySelectorAll('tr[data-param-name="<my field name>"]')

Without element ids:

export default function SomeComponent() {
    const inputRef = useRef();
    const [address, setAddress] = useState("");
    const onAddressChange = (e) => {
        setAddress(e.target.value);
    }
    const setAddressProgrammatically = (newValue) => {
        const event = new Event('change', { bubbles: true });
        const input = inputRef.current;
        if (input) {
            setAddress(newValue);
            input.value = newValue;
            input.dispatchEvent(event);
        }
    }
    return (
        ...
        <input ref={inputRef} type="text" value={address} onChange={onAddressChange}/>
        ...
    );
}

This is not working for me. I looked at the source code and there is a check for document.activeElement that is blocking me. So, I added element.focus(); in the code and it started working.

element.focus();
const valueSetter = Object.getOwnPropertyDescriptor(element, 'value').set;
        const prototype = Object.getPrototypeOf(element);
        const prototypeValueSetter = Object.getOwnPropertyDescriptor(prototype, 'value').set;

        if (valueSetter && valueSetter !== prototypeValueSetter) {
            prototypeValueSetter.call(element, value);
        } else {
            valueSetter.call(element, value);
        }
        element.dispatchEvent(new Event('input', { bubbles: true }));