How to programmatically fill input elements built with React?

by

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 }));

More Related Contents:

  1. Build an HTML table using React from arrays [closed]
  2. Why can’t I directly modify a component’s state, really?
  3. “SyntaxError: Unexpected token < in JSON at position 0"
  4. How to delete an item from state array?
  5. ReactJS – Does render get called any time “setState” is called?
  6. How can I use multiple refs for an array of elements with hooks?
  7. React onClick function fires on render
  8. React Js conditionally applying class attributes
  9. How to access a child’s state in React
  10. ESLint Parsing error: Unexpected token
  11. Is there any way to update a specific index from the array in Firestore
  12. Detecting when user scrolls to bottom of div with React js
  13. Is there a synchronous alternative of setState() in Reactjs
  14. ES6 array map doesn’t return anything: ReactJS
  15. Why React Hook useState uses const and not let
  16. When is it appropriate to use a constructor in REACT?
  17. Use Async/Await with Axios in React.js
  18. How to prevent re-rendering of components that have not changed?
  19. How target DOM with react useRef in map
  20. In ReactJS, why does `setState` behave differently when called synchronously?
  21. Event target is null inside functional setState
  22. Adding a new line in a JSX string inside a paragraph – React
  23. Sort an array of objects in React and render them
  24. How can I update an object inside of an array in firestore? [duplicate]
  25. React.js Serverside rendering and Event Handlers
  26. Increase JavaScript Heap size in create-react-app project
  27. Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode
  28. How to set initial state for useState Hook in jest and enzyme?
  29. Webpack 5 – Uncaught ReferenceError: process is not defined
  30. Global state in React Native

Leave a Comment