Type text into a React input using javascript (Tampermonkey script)?

Question

I'm trying to make a Tampermonkey script that'll automatically enter text into some form input fields.

Normally, you can do this with just:

myElement.value = "my new text"

Problem is, this form is using React, and I can't directly change the value, since it doesn't set the React state.. How can I enter my desired data into these React components in my Tampermonkey script?

Just to clarify, I can't modify the React components at all. This is purely for a tampermonkey script running on the client. — Andrio, Aug 31 '18 at 19:18
https://stackoverflow.com/a/53797269 has the answer to this. It helped me out a lot. — trumad, Jun 11 '19 at 08:53

score 7 · Answer 1 · answered Jan 05 '20 at 11:21

The answer could be found there https://github.com/facebook/react/issues/11488#issuecomment-347775628

let input = someInput; 
let lastValue = input.value;
input.value = 'new value';
let event = new Event('input', { bubbles: true });
// hack React15
event.simulated = true;
// hack React16 内部定义了descriptor拦截value，此处重置状态
let tracker = input._valueTracker;
if (tracker) {
  tracker.setValue(lastValue);
}
input.dispatchEvent(event);

Is there a way to make it work with – xtempore Dec 18 '21 at 02:48 — xtempore, Dec 18 '21 at 02:48

score 4 · Answer 2 · answered Aug 31 '18 at 18:14

4

React doesn't expose component instances, so they aren't reachable without tampering an application on initialization, if this is possible.

Input values should be changed like they would be with vanilla JavaScript, by emitting DOM events.

React provides utility library that has helper functions to do that.

Here's an example. An input:

<input id="input" value={this.state.name} onChange={e => this.setState({ name: e.target.value })} />

And user script that runs after React application initialization:

import { Simulate } from 'react-dom/test-utils';

const input = document.getElementById('input');
input.value = 'Foo';
Simulate.change(input);

answered Aug 31 '18 at 18:14

Estus Flask

206,104
70
425
565

That utility library looks like what I need, but I'm not sure if it's possible to import that into my Tampermonkey script. – Andrio Sep 12 '18 at 17:03
1

@Andrio Most React libs are UMD modules that are exposed as globals in non-modular environment. This one should be available `window.ReactTestUtils` on `react-dom` load. – Estus Flask Sep 12 '18 at 17:07

score 2 · Answer 3 · answered Apr 26 '22 at 13:08

There's some good answers here, but none that work with TextArea. Here's a generic method stolen from another SO post which handles more cases:

const inputTypes = [
    window.HTMLInputElement,
    window.HTMLSelectElement,
    window.HTMLTextAreaElement,
];

export const triggerInputChange = (node, value = '') => {

    // only process the change on elements we know have a value setter in their constructor
    if ( inputTypes.indexOf(node.__proto__.constructor) >-1 ) {

        const setValue = Object.getOwnPropertyDescriptor(node.__proto__, 'value').set;
        const event = new Event('input', { bubbles: true });

        setValue.call(node, value);
        node.dispatchEvent(event);

    }

};

Great but I can't get this to work for a select yet. – Koen May 11 '23 at 08:57 — Koen, May 11 '23 at 08:57

score -1 · Answer 4 · answered Aug 31 '18 at 18:20

class HelloWorld extends React.Component{
  constructor(props){
    super(props);
    this.state = {firstname: ''};
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(e){
   this.setState({firstname: e.target.value})
  }
  render(){
   return(<div><input id="firstname" type=text onChange={(e) =>this.handleChange()} value={this.state.firstname} ></div>) 
 }
}

Type text into a React input using javascript (Tampermonkey script)?

4 Answers4