No onChange event triggered when changing value using javascript

Prerequisites

• I have read the documentation;
• In the case of a bug report, I understand that providing a SSCCE example is tremendously useful to the maintainers.

Description

In my code I use document.getElementById(aFormInputId).value = newvalue to update an input in a react-jsonschema-form. The new value comes from a different part of the application and rather than deconstructing the form id and updating that value in formData and then updating the form, this seemed simpler.

Settings the value works fine, but the form’s onChange isn’t triggered. If I trigger blur on the input afterwards, that event is called correctly but it doesn’t bubble up to a change event on the form itself.

What is the preferred way to force an onChange event on a react-jsonschema-form?

Steps to Reproduce

1. call document.getElementById(aFormInputId).value = newvalue
2. see the value in the input change
3. call const event = document.getElementById(aFormInputId).dispatchEvent(new Event('blur', { bubbles: true }));
4. see the onBlur event get called as expected
5. see no onChange even being called

Expected behavior

When the value of an input changes problematically, the form’s onChange event is also called

Actual behavior

The forms onChange event is not called and formData is not updated.

Version

1.0.3

[knilink]

because assigning value doesn’t trigger an input event. try

element = document.getElementById(aFormInputId)
element.value = newvalue
element.dispatchEvent(new Event('input', { bubbles: true }))

read more

[KenEucker]

I’m also struggling to programmatically set the inputs of my form from outside the App and getting the react-jsonschema-form to recognize these changes. I’ve tried the suggestions here, by doing:

field.value = value;
field.dispatchEvent(new Event('input', { bubbles: true }));

But that still doesn’t work and the form believes that there are errors even though the required fields do have a value.