dispatchEvent on input/textarea ignored

dispatchEvent-on-input-textarea-ignored-solution.js

// from: https://github.com/facebook/react/issues/10135#issuecomment-314441175

// fatfisz <https://github.com/fatfisz> commented on Jul 11, 2017

// Just leaving a solution for future reference (checked in Edge 15, IE 11, FF 53, Chrome 59):

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

// Use it like so:

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

// Object.getOwnPropertyDescriptor(element, ...) returns undefined from a
// Chrome extension context, so use this instead:

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

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