React-jsonschema-form: No onChange event triggered when changing value using javascript

[Kilian]

Prerequisites

• [x] I have read the documentation;
• [x] 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

[Kilian]

I decided to try the other route and update my formData object. Updating that object and rerendering the form (via props) however also did not update the form (related: https://github.com/mozilla-services/react-jsonschema-form/issues/486 ) even though I have liveValidate. I got it to work by implementing a validate function that does nothing but return the errors.

[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

[Kilian]

Triggering an input event also doesn't bubble up to the onChange event of the form, unfortunately.

[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.

[Kilian]

Hey @KenEucker, I ended up adding an empty validate function to my form class:

validate = (formData, errors) => errors;

which helps in some cases, but not all. In the end I now keep my formdata on the parent react component, and when I need to change a value from an external source, i update the formdata manually (the npm package 'object-search` helps a lot here) as well as setting the value in the form. The latter then only takes care of showing visually to the user what is happening. When there are onChange events triggered from the form, i update the same formData event.

I hope that helps you on your way!

[KenEucker]

@kilian

I ended up using the solution you suggested, with a validate method that returns an empty array. I was worried that this would negate the form validations I wanted to keep, but it does not. I continue to see errors with my form if they do not pass the individual validation I set on the fields.

I would like a more elegant solution than having to store form data outside of the form and be able to programmatically set the form data, but this will work for now.

[epicfaace]

Closing this due to inactivity, but if you have any more questions, please feel free to comment.