1

Using Javascript, how can I populate an input field on a ReactJS form from the perspective of an end user? Is there a specific sequence of events that React listens to when I update an input normally?

I know this is possible because a utility like 1Password does it just fine when plugging in a stored Identity, and apparently using a combination of keyboard events. I tried finding the answer there, though their minified JS code is difficult to understand as they handle tons of input types and edge cases among hundreds of sites.

Don Pflaster
  • 1,000
  • 7
  • 22
  • Setting `inputElement.value = "new value";` (where `inputElement` is a reference to the input rendered in the browser DOM) should just work. – pawel Mar 24 '16 at 14:10
  • ReactJS ignores changes made directly to the DOM. It instead listens for user interaction and then updates its own "shadow DOM'. – Don Pflaster Mar 24 '16 at 14:14
  • It depends on what's your desired outcome. The value in the rendered input will be updated. Question is if you need to communicate the change back to React to trigger some change listeners or whatever. I guess you don't control the React-based part of the problem? – pawel Mar 24 '16 at 14:32
  • Is this what you want? https://facebook.github.io/react/docs/forms.html#controlled-components – James Brierley Mar 24 '16 at 14:39
  • Those docs certainly explain how React works, but I'm not building a site. I'm just trying to input data without actually clicking into the box and typing myself. – Don Pflaster Mar 24 '16 at 15:08
  • It's gotta be event based. If you search the react.js source for 'EventListener' there is actually a diagram of their event handling architecture. I guess if you are inputting text programmatically you might need to dispatch the associated events yourself from javascript. – Radio- Mar 25 '16 at 03:42
  • Agreed. I think I'll try to follow the second answer here and monitor them. http://stackoverflow.com/questions/10213703/how-do-i-view-events-fired-on-an-element-in-chrome-web-developer – Don Pflaster Mar 25 '16 at 13:05

1 Answers1

1

To update a text box element:

Seems the solution is to fire a focus event (assuming your element is selected in box:

  var event = document.createEvent('FocusEvent');
  event.initEvent('focus', true, true);
  box.dispatchEvent(event);

Then iterate over each character you want to type and fire a "textInput" event. In this case, the character is "3":

  var event = document.createEvent('TextEvent');
  event.initTextEvent('textInput', true, true, window, "3");
  box.dispatchEvent(event);

Be sure to blur afterward, just in case any UI updates depend on you being done with that box:

  var event = document.createEvent('FocusEvent');
  event.initEvent('blur', true, true);
  box.dispatchEvent(event);

To update a dropdown element: (where element is "select")

  select.value = "the option value"
  var event = document.createEvent('Event');
  event.initEvent('input', true, true)
  select.dispatchEvent(event)

  var event = document.createEvent('Event');
  event.initEvent('change', true, true)
  select.dispatchEvent(event)
Don Pflaster
  • 1,000
  • 7
  • 22