I'm trying to change the value of a reactjs input field on Internet Explorer via DOM manipulation without access to the source code.
document.getElementById('description').value = 'I changed description';
The "description" field is a simple HTML textarea with reactjs. Reading other questions here, (that frustratingly I'm not able to comment on them) I found that to actually change the value, reactjs require to trigger an input event on the field.
Seen here: What is the best way to trigger onchange event in react js
The solution is to send the following input event after the change:
var evt = new Event('input', { bubbles: true });
elem.dispatchEvent(evt);
This code works on Chrome and Firefox, but Internet Explorer doesn't support new Event().
There is a polyfill for it:
var evt = document.createEvent('CustomEvent');
evt.initCustomEvent('input', true, false, { });
elem.dispatchEvent(evt);
For some reason this is not working on IE11 just on Edge. When I say it's not working, I mean it's not working for reactjs fields, it will work on normal HTML5 fields though.
Finally, how can I correctly change the value of a reactjs input field on IE11 through DOM ? It has to be on IE, other browsers I already know how to.
